[React] #3. State

Dev/React

[React] #3. State

코딩삐약 2022. 5. 23. 17:47

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        const root = document.getElementById("root");
        let counter = 0;
        function countUp() {
            counter = counter + 1;
            render(); // UI가 변경되도록 리렌더링 해준다.
        }
        
        function render() {
            ReactDOM.render(<Container />, root);
        }
        const Container = () => (
            <div>
                <h3>Total clicks: {counter}</h3>
                <button onClick={countUp}>Click me!</button>
            </div>
        );
        render();
    </script>
</html>

// React.useState() 사용

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        const root = document.getElementById("root");
        function App() {
            // 배열의 요소에 각각 이름 붙여서 꺼내기 쉽게 한다.
            /* 2. 변수에 데이터를 담는다 */
            const [counter, setCounter] = React.useState(0); // [바꿀 수 있는 값, 함수]
            const onClick = () => {
            /* 3. 해당 변수에 담긴값을 바꾼다. */
                setCounter(counter + 1); //counter = '값'을 넣고 리렌더링이 자동으로 됨
            }
            /* 1. 변수를 컴포넌트에 연결 */
            return (
                <div>
                  <h3>Total clicks: {counter}</h3> 
                  <button onClick={onClick}>Click me!</button>
                </div>
            );
        }
        ReactDOM.render(<App />, root);
    </script>
</html>

React.js 특 : 데이터가 바뀔때마다 컴포넌트를 리렌더링하고 UI를 refresh한다.
// modifier 함수로 state를 바꿀때, 새로운 값을 가지고 컴포넌트 전체가 재생성 됨

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        const root = document.getElementById("root");
        function App() {
            const [counter, setCounter] = React.useState(0); 
            const onClick = () => {
                //1. 직접 값을 설정 
                // setCounter(55);

                //2. 현재 값에 계산한 값 설정
                setCounter((current) => current + 1); 
                // 현재 state를 바탕으로 다음 state를 계산해내고 싶다면,
                // 함수를 사용 (혼동 방지위해)
            }
            return (
                <div>
                  <h3>Total clicks: {counter}</h3> 
                  <button onClick={onClick}>Click me!</button>
                </div>
            );
        }
        ReactDOM.render(<App />, root);
    </script>
</html>