[React] 8. State 상태 관리

Feb 20, 2026

Contents

1. state란 2. State를 가지는 컴포넌트 생성 1. useState 사용 2. useState 함수 호출해보기 3. state와 상태변화함수 활용해보기 3. 전구 토글 버튼 만들기 예제 ✅ 왜 일반 변수가 아닌 useState를 사용할까?

1. state란

💡

현재 가지고 있는 형태나 모양을 정의

변화할 수 있는 동적인 값 즉 상태.

리액트의 모든 컴포넌트는 자신이 가지고 있는 상태가 존재한다

State를 갖는 컴포넌트는 State의 값에 따라 UI가 달라질 수 있다.

ex ) 유저의 상태가 login 되어있을 때 로그인된 유저에게 보이는 UI 노출

그렇지 않다면 logout 상태의 유저에게 보이는 UI 노출

따라서 State의 값에 따라 다시 랜더링되는 과정이 발생할 수 있는데,

이렇게 다시 랜더링되는 것을 리랜더, 혹은 리랜더링이라 부른다.

또한 하나의 컴포넌트 내에서도 여러 State를 가질 수 있다.

각각 다른 이름의 State에 상태 값을 저장할 수 있다.

2. State를 가지는 컴포넌트 생성

1. useState 사용

State를 가지는 컴포넌트를 만들기 위해서는 우선, 리액트의 내장함수인 useState를 import 해야한다.


import "./App.css";
import { useState } from "react";

function App() {
  return <></>;
}

export default App;

2. useState 함수 호출해보기


import "./App.css";
import { useState } from "react";

function App() {
  const state = useState();
  console.log(state);
  return <></>;
}

export default App;

✅ useState 함수가 반환하는 값의 구조

기본적으로 두 개의 요소를 가지는 배열을 반환한다.

첫 번째 요소는 새롭게 생성된 State의 값이다.

따라서 새로운 State를 생성할 때 인수로 초기값을 0으로 넣어주면 다음과 같이 콘솔에 State가 반환하는 배열의 첫 번째 요소의 값으로 0이 출력되는 것을 확인할 수 있다.


import "./App.css";
import { useState } from "react";

function App() {
  const state = useState(0);
  console.log(state);
  return <></>;
}

export default App;

State가 반환하는 배열의 두 번째 요소로 들어오는 함수는 앞서 말한 State의 값을 변화시키는 함수인데, 이를 상태 변화 함수라 부른다.

3. state와 상태변화함수 활용해보기

배열을 반환하는 useState 함수를 단순한 변수가 아닌,

비구조화할당을 활용한 배열에 각각 지정된 이름으로 저장한다.

보통은 다음과 같은 문법을 사용!


const [state, setState] = useState(0);

이렇게 저장된 state를 화면에 랜더링시키기 위해서 h1 태그에 넣으면

초기값으로 넣어두 0이 문제 없이 출력되는 것을 확인할 수 있다.

여기서 state값을 변화시키는 함수, 우리가 setState라는 이름으로 만든 함수를 만들어주도록 하자.

버튼을 만들고 버튼을 클릭 할 때마다 상태값이 1씩 증가하는 식을 만들면 된다.


import "./App.css";
import { useState } from "react";

function App() {
  const [state, setState] = useState(0);
  return (
    <>
      <h1>{state}</h1>
      <button
        onClick={() => {
          setState(state + 1);
        }}
      >
        +
      </button>
    </>
  );
}

export default App;

버튼 태그에 onClick 이벤트를 삽입하고 익명함수로 setState 함수를 전달한다.

setState 함수 내에서 우리가 만들고자 하는 증가식을 만들면 되는데, 현재 저장된 상태값인 state에 + 1을 하여 상태가 state에 전달되고 이것을 클릭할 때마다 더해진 값이 저장되는 동작이 반복될 것이다.

이는 상태가 바뀔 때마다 리랜더링 된다.

3. 전구 토글 버튼 만들기 예제

내나 같은 방법으로 상태를 변화시키고 리랜더링하는 예제를 만들어보자.

이 때는 토글 버튼의 기능을 만들기 위해 삼항연산자를 사용했다.


import "./App.css";
import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [light, setLight] = useState("OFF");

  return (
    <>
      <div>
        <h1>{light}</h1>
        <button
          onClick={() => {
            setLight(light === "ON" ? "Off" : "ON");
          }}
        >
          전구 {light === "ON" ? "끄기" : "켜기"}
        </button>
      </div>
      <div>
        <h1>{count}</h1>
        <button
          onClick={() => {
            setCount(count + 1);
          }}
        >
          +
        </button>
      </div>
    </>
  );
}

export default App;

✅ 왜 일반 변수가 아닌 useState를 사용할까?

일반 변수로 값을 저장하고 변경하는 함수로도 기능 구현은 가능하다. 하지만 일반 변수는 값이 바뀌어도 컴포넌트를 다시 렌더링하지 않는다.

React는 상태(state)가 변경될 때만 리렌더링을 수행하여 화면을 업데이트한다.

따라서 값 변경이 화면에 반영되도록 하려면

→ React가 변화를 감지할 수 있는 상태 관리 도구인 useState를 사용해야 한다.