[React] 컴포넌트 state (React.useState(), setState)

니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.
부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!

출처 : https://nomadcoders.co/react-for-beginners

이전글에서 만든 컴포넌트에 이벤트를 적용시켜보겠습니다.

[React] JSX문법 기초 (JS to JSX)

1. state

이전글에서의 공부하려고 넣은 불필요한 옵션들은 제외하고 처음에 만드려고 했던 "버튼 클릭시 카운터 증가"하는 코드를 만들었습니다.

커스텀태그를 만들고, 이벤트 함수를 연결을 하였는데요, 기존의 js문법보다 훨씬 간단하고 한 눈에 보기 편하더라구요.

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <!--React js, DOM install-->
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script> <!--interactivity 원동력 -->
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script> <!--react element to html -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <!--JSX to JS-->
    <script type="text/babel">
        const root = document.getElementById("root");

        let counter = 0;
        function countUp () {
            counter += 1;
            render();
        }

        function render() {
            ReactDOM.render(<Container/>, root);
        }

        const Container = () =>(
            <div>
                <h3>Total clicks: {counter}</h3>

                <button onClick={countUp}>Click me</button>
            </div>
        );
        render();
        
    </script>
</html>

핵심 코드를 보면 카운트증가랑 렌더링하는 부분을 함수로 구현하여 state로 {}안에 함수명을 넣어서 사용해주고 있습니다.

function countUp () {
    counter += 1;
    render();
}

function render() {
    ReactDOM.render(<Container/>, root);
}

const Container = () =>(
    <div>
        <h3>Total clicks: {counter}</h3>

        <button onClick={countUp}>Click me</button>
    </div>
);
render();

그리고 무엇보다 js에서는 h3태그 전체가 변경된 거에 비해 JSX의 state를 사용한 것은 딱 필요한 부분만 변경되는 것을 볼 수 있습니다.

2. React.useState()

이번에는 리액트의 state를 본격적으로 사용해보겠습니다.

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <!--React js, DOM install-->
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script> <!--interactivity 원동력 -->
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script> <!--react element to html -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <!--JSX to JS-->
    <script type="text/babel">
        const root = document.getElementById("root");

        function App () {
            /*
            const data = React.useState(0);
            const counter = data[0];
            const modifier = data[1];
            */

            // 위 주석과 동일
            const [counter, modifier] = React.useState(0);
            return (
                <div>
                    <h3>Total clicks: {counter}</h3>

                    <button>Click me</button>
                </div>
            );
        }
        ReactDOM.render(<App/>, root);
        
    </script>
</html>

우선, React.useState()에 대해 알아보겠습니다.

console.log(React.useState());

보시면 state에는 배열을 가지고 있는데 첫 번째 배열 값에는 이제 사용할 변수에 대한 내용이고, 두 번째 배열 값은 그 변수에 대한 함수가 들어가 있습니다.

undefined로 나오는 이유는 useState() 괄호 안에 아무런 초기값을 넣지 않아서 입니다.

이렇게 초기 값을 설정하게 되면, 다음처럼 undefined대신 초기 값으로 설정한 0이 들어가게 됩니다.

console.log(React.useState(0));

좀 더 재밌는 거를 설명해보자면,

보통은 배열에 들어가 있는 값을 꺼내서 사용할 때 다음처럼 사용을 합니다.

const data = React.useState(0);
const counter = data[0];
const modifier = data[1];

그치만 리액트에서는 !!

이렇게 한 코드로 설명이 됩니다. 너무너무 놀라웠습니다,,

const [counter, modifier] = React.useState(0);

위에 적은 내용을 자세히 설명드리면

인덱스 0 (counter): 현재의 상태(State) 값입니다.
인덱스 1 (modifier): 상태를 업데이트하기 위한 Setter 함수입니다.
- 이 함수를 호출하여 상태를 변경하면 리액트가 이를 감지하고 컴포넌트를 다시 렌더링(Re-render)하게 됩니다.

3. setState

이번에는 위에서 배운 state를 좀 더 획기적으로 사용해보겠습니다.

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <!--React js, DOM install-->
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script> <!--interactivity 원동력 -->
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script> <!--react element to html -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <!--JSX to JS-->
    <script type="text/babel">
        const root = document.getElementById("root");
        

        function App () {
            let [counter, setCounter] = React.useState(0);

            const onclick = () =>{
                /*
                counter += 1;
                ReactDOM.render(<App/>, root);
                */
                // 위 주석과 동일
                setCounter(counter + 1);

            }
            return (
                <div>
                    <h3>Total clicks: {counter}</h3>

                    <button onClick={onclick}>Click me</button>
                </div>
            );
        }
        ReactDOM.render(<App/>, root);
        
    </script>
</html>

이전에는 이렇게 카운터 변수에 값을 증가하고 다시 렌더링을 해주어야했는데

counter += 1;
ReactDOM.render(<App/>, root);

저희는 state를 사용함으로써 이렇게 간단하게 카운터와 동시에 자동으로 렌더링이 가능하게 되었습니다.

state 값이 바뀌면 새로운 값을 가지고 컴포넌트가 리렌더링이 됩니다.

setCounter(counter + 1);

바닐라 JS와 비교를 해보면

<!DOCTYPE html>
<html>
    <body>
        <span> Total clicks: 0</span>
        <button id="btn">Click me</button>
    </body>
    <script>
        let counter = 0;
        const button = document.getElementById("btn");
        const span = document.querySelector("span");

        function handleClick() {
            counter += 1;
            span.textContent = ` Total clicks: ${counter}`;
        }
        button.addEventListener("click", handleClick);
    </script>
</html>

확실한 차이를 느낄 수 있습니다.

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script> <!--interactivity 원동력 -->
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script> <!--react element to html -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <!--JSX to JS-->
    <script type="text/babel">
        const root = document.getElementById("root");

        function App () {
            let [counter, setCounter] = React.useState(0);

            const onclick = () =>{
                setCounter(counter + 1);

            }
            return (
                <div>
                    <h3>Total clicks: {counter}</h3>

                    <button onClick={onclick}>Click me</button>
                </div>
            );
        }
        ReactDOM.render(<App/>, root);
        
    </script>
</html>

[참고] https://ko.legacy.reactjs.org/docs/faq-state.html

다음 글에서는 state 값을 설정하는 방법 2가지에 대해서 정리해보겠습니다.

[React] State Functions (state 값 설정 방법 2가지)

읽어주셔서 감사합니다.

'Frontend > React' 카테고리의 다른 글

[React] Divide : 작은 컴포넌트로 분할 - 단위변환기 3 (0)	2026.02.07
[React] 분 <-> 시, 리셋기능 - 단위변환기2 (0)	2026.02.03
[React] input state () - 단위변환기1 Warning : Invalid DOM property (0)	2026.02.02
[React] State Functions (state 값 설정 방법 2가지) (0)	2026.02.02
[React] JSX문법 기초 (JS to JSX) (0)	2026.01.30

1. state

2. React.useState()

3. setState

'Frontend > React' 카테고리의 다른 글

티스토리툴바