3.React

2022. 9. 6. 17:29ㆍ프론트엔드

2022.09.06.화

1.props_state

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>

    <script type="text/babel">
        //1.props
        // const Component = props => {
        //     console.log(props);
        //     return (
        //         <div>
        //             <h1>It's a {props.value}</h1>
        //         </div>
        //     )
        // }

        //별도로 지정한 props가 없을 때 defaultProps를 지정하고자 할때
        // Component.defaultProps = {
        //     value: 'default value',
        // }

        // ReactDOM.render(<Component />, document.getElementById('root'));

        //2.before state
        // let count = 0;
        // const BeforeState = props => {
        //     const clickHandler = () => { //click event를 처리할 핸들러(담당자)
        //         // console.log('button clicked');
        //         count++;
        //         console.log(count);
        //     }

        //     return (
        //         <div>
        //             <p>You clicked {count} times</p>
        //             <button onClick={clickHandler}>Click me</button>    
        //         </div>
        //     )
        // }

        // ReactDOM.render(<BeforeState />, document.getElementById('root'));

        //3.state
        // console.log(React);

        const { useState } = React; //React객체에서 useState라는 이름의 프로퍼티 추출(import useState)
        //console.log(useState)

        const Example = () => {
            console.log('rendered');

            //우리의 관심사는 count값(하나의 state)
            //-> 특정 컴포넌트에서 관리하고자 하는 값들을 state개념으로 관리할 수 있음

            //useState hook의 원형 : [state, setState] = useState(initialState);
            const [count, setCount] = useState(0); //count라는 state의 초기값을 0으로 지정 useState(초기값 or initialState)

            const clickHandler = () => {
                //count += 1; //count is read only
                setCount(count + 1); //setCount()를 통해 count(state 값)을 변경
                //state(Example 컴포너틑 맥락에서 state는 count)가 변경되면 
                //React는 변경 내역 감지하고, 해당 컴포넌트를 새로 렌더링 시킴(re-rendering)
            }

            return (
                <div>
                     <p>You clicked {count} times</p>
                     <button onClick={clickHandler}>Click me</button>    
                </div>
            )
        }
        ReactDOM.render(<Example />, document.getElementById('root'));

    </script>
</body>
</html>

2.event_handling

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>

    <script type="text/babel">
        const { useState } = React; 

        const Toggle = () => {
            //useState hook의 원형 : [state, setState] = useState(initialState);
            const [isOn, setIsOn] = useState(false);

            const clickHandler = () => {
               setIsOn(!isOn)

            //    document.getElementById('button').innerHTML = isOn ? 'Off' : 'On';
            //    document.getElementById('img').src = isOn ? 'pic_bulbon.gif' : 'pic_bulboff.gif';

            }

            return (
                <>
                     <button id='button' onClick={clickHandler}>{isOn ? 'Off' : 'On'}</button>
                     <img id='img' src={isOn ? 'pic_bulbon.gif' : 'pic_bulboff.gif'} />
                </>
            )
        }
        ReactDOM.render(<Toggle />, document.getElementById('root'));
    </script>
</body>
</html>

3.conditional_rendering

 -login_state

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>

    <script type="text/babel">
        //로그인 상태일 때 사용할 컴포넌트
        const UserGreeting = props => {
            return <h1>Welcome back!</h1>;
        }

        //비로그인 상태일 때 사용할 컴포넌트
        const GuestGreeting = props => {
            return <h1>Please sign up!</h1>;
        }

        //로그인 여부를 알려주는 최상위 컴포넌트
        const Greeting = props => {
            // if(props.isLoggedIn) {
            //     return <UserGreeting />; 
            // }
            // return <GuestGreeting />;
            //삼항 연산자로 변경
            return props.isLoggedIn ? <UserGreeting /> : <GuestGreeting />;
        }

        ReactDOM.render(<Greeting isLoggedIn={false}/>, document.getElementById('root'));
    </script>
</body>
</html>

 -login_control

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    
    <script type="text/babel">
        // 함수형 컴포넌트로 LoginControl이라는 컴포넌트 생성

        // 현재 LoginControl이 최상위 컴포넌트.
        const { useState } = React;

        const LoginControl = () => {
            const [isLoggedIn, setIsLoggedIn] = useState(false);
            // is it Logged in? true or false

            const loginButtonHandler = () => {
                setIsLoggedIn(!isLoggedIn)
            };

            return (
                <>
                    <Greeting isLoggedIn={isLoggedIn}/>
                    {isLoggedIn ? <LogoutButton onClick={loginButtonHandler}/> : <LoginButton onClick={loginButtonHandler}/>}
                </>
            )
        }

        // 인사 메시지를 처리하는 별도의 컴포넌트 생성
        const Greeting = (props) => {
            return props.isLoggedIn ? <UserGreeting /> : <GuestGreeting />
        }

        const UserGreeting = () => {
            return <h1>Welcome back!</h1>
        }

        // GuestGreeting.jsx, GuestGreeting.js
        const GuestGreeting = () => {
            return <h1>Please sign in!</h1>
        }

        // props로 함수를 전달받아서, 그 함수를 호출해서 Login or Logout text 및
        // Greeting 텍스트도 변경하려면 어떻게 해야할까?
        const LoginButton = (props) => {
            return <button onClick={props.onClick}>Login</button>
        };
        
        const LogoutButton = (props) => {
            return <button onClick={props.onClick}>Logout</button>
        };

        ReactDOM.render(<LoginControl />, document.getElementById('root'));
    </script>
</body>
</html>

4.list_key

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>

    <script type="text/babel">
        //1.map() basic
        const numbers = [1, 2, 3, 4, 5];

        //map() Array 사용가능
        //Array.prototype.map(callbackFn)
        const doubled = numbers.map(number => number * 2);
        //numbers배열에 있는 요소(item or number)를 하나씩 number 배열에 할당 
        //number * 2 연산 처리 후에 새로운 배열로 반환

        //2.map() in react
        const NumberList = (props) => {
            const numbers = props.numbers;
            const listItems = numbers.map((number, index) => <li key={index}>{number}</li>);
            console.log(listItems);
            return (
                <ul>
                    {listItems}
                </ul>
            )
        }

        ReactDOM.render(<NumberList numbers={numbers}/>, document.getElementById('root'));
    </script>
</body>
</html>

5.form

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>

    <script type="text/babel">

        const Form = (props) => {
            const submitHandler = (event) => { //submit 이벤트를 처리할 핸들러 작성
                event.preventDefault(); //form의 기본 동작(reloading)을 제어하기 위한 코드
                console.log('You clicked submit');
            }

            return (
                <form onSubmit={submitHandler}>
                    <button type="submit">Submit</button>    
                </form>
            )
        }

        ReactDOM.render(<Form />, document.getElementById('root'));
    </script>
</body>
</html>

 

 

'프론트엔드' 카테고리의 다른 글

4.React CSS  (0) 2022.09.07
2.React  (0) 2022.09.05
1.CSS  (0) 2022.08.17
0.HTML/CSS  (0) 2022.08.16

관련글

티스토리툴바