React 상태(State)란 무엇인가?

React를 공부하다 보면 "상태(State)"라는 개념을 자주 접하게 된다. 초보자에게는 다소 생소할 수 있지만, React에서 UI를 동적으로 업데이트하기 위해 꼭 필요한 요소다. 이번 글에서는 React의 상태가 무엇인지, 왜 필요한지, 그리고 어떻게 사용하는지를 쉽게 설명해보겠다.

1. 상태(State)란 무엇인가?

React에서 상태(State)는 컴포넌트가 기억하는 값이다. 즉, 상태는 시간이 지나면서 변할 수 있는 데이터를 의미한다. 일반적인 HTML, CSS, JavaScript를 사용하면 화면의 값을 직접 조작해야 하지만, React에서는 상태를 변경하면 자동으로 화면이 다시 렌더링된다.

예를 들어, 버튼을 클릭할 때마다 숫자가 증가하는 기능을 만들고 싶다고 하자. 이때 증가하는 숫자를 React의 상태(State)로 관리하면, 값이 변경될 때 자동으로 화면에 반영할 수 있다.

예제: 카운터 버튼 만들기

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1 증가</button>
    </div>
  );
}

코드 설명

• useState(0): 초기값을 0으로 설정하고, count 변수와 setCount 함수 생성
• <p>{count}</p>: 현재 카운트를 화면에 표시
• setCount(count + 1): 버튼 클릭 시 count 값을 1 증가시키고, 변경된 값을 화면에 반영

이처럼 React에서 상태를 사용하면 값이 변경될 때 UI를 직접 업데이트할 필요 없이 React가 알아서 변경해준다.

2. 상태가 필요한 이유

React에서는 일반 변수와 상태(State)의 차이가 중요하다. 단순히 JavaScript 변수에 값을 저장하면 UI가 자동으로 변경되지 않는다.

let count = 0;

function increaseCount() {
  count += 1;
  console.log(count);
}

위 코드에서 count 값을 변경해도 화면은 업데이트되지 않는다. 하지만 useState를 사용하면 setState를 호출할 때 React가 컴포넌트를 다시 렌더링하여 UI가 최신 상태를 반영할 수 있도록 한다.

3. 상태의 사용법

React에서 상태를 사용하려면 useState 훅을 사용해야 한다.

기본 문법

const [state, setState] = useState(초기값);

여기서 state는 현재 상태 값을 저장하는 변수이고, setState는 상태를 변경하는 함수다. useState(초기값)을 호출하면 state의 초기값을 설정할 수 있다.

예제: 입력 폼 관리

import { useState } from 'react';

function InputExample() {
  const [text, setText] = useState('');

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <p>입력한 값: {text}</p>
    </div>
  );
}

코드 설명

• useState(''): 빈 문자열을 초기값으로 설정
• <input>의 value를 text 상태와 연결하여 값이 변경될 때마다 setText(e.target.value)로 업데이트
• <p>{text}</p>에서 입력된 값이 즉시 반영됨

이처럼 useState를 사용하면 사용자의 입력 값을 실시간으로 반영할 수 있다.

4. 상태 변경 시 주의할 점

1) 상태를 직접 수정하지 말 것

count = count + 1; // ❌ 이렇게 하면 안 됨!

React에서는 상태를 직접 수정하면 안 된다. 대신 setState 함수를 사용해야 한다.

setCount(count + 1); // ✅ 이렇게 해야 React가 변경을 감지함

2) 상태는 비동기적으로 변경됨

setState는 즉시 실행되는 것이 아니라 비동기적으로 실행된다. 따라서 아래처럼 console.log를 찍으면 예상과 다른 결과가 나올 수 있다.

console.log(count); // 이전 값 출력
setCount(count + 1);
console.log(count); // 여전히 이전 값 출력될 가능성 있음

이를 해결하려면 setState에 함수를 전달하는 방식으로 이전 값을 안전하게 가져와야 한다.

setCount(prevCount => prevCount + 1);

이렇게 하면 prevCount가 이전 상태 값을 안전하게 가져와서 변경할 수 있다.

5. 상태가 변경되면 어떻게 될까?

React에서 상태가 변경되면 컴포넌트가 다시 렌더링된다. 하지만 변경된 부분만 업데이트되기 때문에 불필요한 렌더링을 최소화할 수 있다.

예를 들어, setCount(count + 1)이 실행되면 React는 이전 UI와 변경된 UI를 비교한 후, 변경된 부분만 업데이트한다. 이를 "리액트의 효율적인 렌더링"이라고 한다.

6. 정리

• 상태(State)는 컴포넌트가 기억하는 값이며, 시간이 지나면서 변경될 수 있다.
• useState(초기값)을 사용하여 상태를 선언할 수 있다.
• 상태를 변경할 때는 setState(새 값)을 사용해야 UI가 자동으로 업데이트된다.
• 상태는 비동기적으로 변경되므로 이전 값을 기반으로 업데이트할 때는 함수형 업데이트를 사용해야 한다.
• React는 상태 변경 시 효율적으로 렌더링하여 성능을 최적화한다.

React의 상태를 잘 이해하면 동적인 UI를 만들 때 매우 유용하다.!! 
오늘도 즐코 빡코 !!!