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

 

React에서 **상태(State)**는 애플리케이션의 동적인 데이터나 UI의 변화를 관리하는 중요한 개념입니다. 컴포넌트는 상태를 사용하여 데이터를 추적하고, 그에 따라 UI를 동적으로 업데이트합니다. 상태는 React 애플리케이션에서 데이터 흐름과 렌더링을 제어하는 중심적인 역할을 하며, 사용자 인터페이스(UI)가 어떻게 반응할지를 결정합니다.

이번 글에서는 React에서 상태가 무엇인지, 어떻게 사용하는지, 그리고 상태 관리에 대해 알아보겠습니다.

1. React 상태의 개념

React에서 상태(state)는 컴포넌트의 내부 데이터를 의미합니다. 상태는 주로 사용자의 상호작용, 서버로부터의 응답, 또는 타이머와 같은 외부 이벤트에 의해 변경됩니다. 상태가 변경되면 React는 UI를 자동으로 업데이트하여 변화된 데이터를 반영합니다.

1.1 상태의 중요성

• 동적 데이터 관리: 상태는 데이터를 동적으로 관리할 수 있게 해줍니다. 예를 들어, 사용자가 버튼을 클릭할 때마다 페이지의 내용이 달라지거나, 입력된 값에 따라 UI가 실시간으로 변할 수 있습니다.
• UI 업데이트: 상태가 변경되면, React는 해당 상태가 사용되는 모든 컴포넌트를 다시 렌더링하여 최신 데이터를 화면에 표시합니다.

1.2 상태와 Props의 차이

• 상태(State): 상태는 컴포넌트 내부에서 관리되며, 컴포넌트의 데이터가 변경될 때마다 렌더링을 트리거합니다.
• 속성(Props): 속성은 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터입니다. 속성은 읽기 전용이며, 자식 컴포넌트에서 변경할 수 없습니다.

2. React에서 상태 사용하기

React 컴포넌트에서 상태를 사용하기 위해서는 useState 훅을 사용합니다. useState는 상태를 선언하고, 상태를 업데이트할 수 있는 함수도 제공합니다.

2.1 useState 훅 사용법

import React, { useState } from 'react';

function Counter() {
  // 상태 변수 "count"를 0으로 초기화
  const [count, setCount] = useState(0);

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

위의 코드에서 useState(0)는 count라는 상태 변수를 선언하고, 그 초기값을 0으로 설정합니다. setCount는 이 상태를 업데이트할 때 사용됩니다.

2.2 상태 업데이트

상태를 업데이트하는 방법은 setState 함수를 사용하는 것입니다. useState 훅으로 선언한 상태는 setState와 비슷한 방식으로 업데이트되며, 상태가 변경되면 컴포넌트는 자동으로 다시 렌더링됩니다.

setCount(count + 1); // 상태 업데이트

2.3 상태의 여러 값 관리

여러 개의 상태를 관리할 때는 각 상태를 독립적으로 선언할 수 있습니다. 예를 들어, count와 name 두 개의 상태를 각각 관리하려면 다음과 같이 작성합니다.

import React, { useState } from 'react';

function UserProfile() {
  const [name, setName] = useState('홍길동');
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>이름: {name}</h1>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>카운트 증가</button>
      <button onClick={() => setName('김철수')}>이름 변경</button>
    </div>
  );
}

2.4 객체나 배열로 상태 관리하기

React에서는 상태가 객체나 배열일 수도 있습니다. 예를 들어, 사용자 정보를 관리하는 상태는 객체로 구성할 수 있습니다.

const [user, setUser] = useState({ name: '홍길동', age: 25 });

setUser({ ...user, age: 26 }); // 나이만 변경

3. 상태 변경과 렌더링

상태를 변경하면 React는 해당 상태를 사용하는 컴포넌트를 자동으로 다시 렌더링합니다. 이 렌더링 과정은 가상 DOM을 사용하여 성능을 최적화합니다. 가상 DOM은 상태가 변경되면, 실제 DOM에 변화가 생길 때까지 비교 과정을 거칩니다.

3.1 상태 변경에 따른 렌더링 흐름

1. 상태가 변경됩니다.
2. React는 변경된 상태를 사용하여 새로운 가상 DOM을 생성합니다.
3. 이전의 가상 DOM과 비교하여 실제 DOM을 최소한으로 업데이트합니다.

이러한 과정 덕분에 React는 성능을 최적화하며, 불필요한 DOM 업데이트를 방지합니다.

4. 상태 관리의 중요성

React 애플리케이션이 커지면서 상태 관리가 중요한 문제로 떠오릅니다. 컴포넌트 간의 상태 공유나 복잡한 상태 업데이트는 애플리케이션을 더욱 복잡하게 만들 수 있기 때문입니다. 이를 해결하기 위해 다양한 상태 관리 방법이 존재합니다.

4.1 useContext 훅

useContext 훅은 React에서 전역 상태를 관리할 수 있게 해주는 훅입니다. 이를 통해 컴포넌트 트리 깊은 곳에 있는 컴포넌트들이 상위 컴포넌트의 상태를 공유할 수 있습니다.

const UserContext = React.createContext();

function Parent() {
  const [user, setUser] = useState({ name: '홍길동', age: 25 });

  return (
    <UserContext.Provider value={user}>
      <Child />
    </UserContext.Provider>
  );
}

function Child() {
  const user = useContext(UserContext);
  return <p>이름: {user.name}</p>;
}

4.2 Redux

Redux는 애플리케이션의 상태를 중앙에서 관리하는 라이브러리로, 복잡한 상태를 효율적으로 관리할 수 있도록 돕습니다. Redux를 사용하면 상태를 한 곳에서 관리하고, 액션을 통해 상태를 변경할 수 있습니다.

// 액션
const increment = () => ({ type: 'INCREMENT' });

// 리듀서
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    default:
      return state;
  }
};

4.3 Zustand, Recoil 등

Redux 외에도 Zustand, Recoil과 같은 새로운 상태 관리 라이브러리들이 등장했습니다. 이들 라이브러리는 간단하면서도 효율적으로 상태를 관리할 수 있는 방법을 제공합니다.

5. 결론

React의 상태는 컴포넌트의 동적인 데이터를 관리하고, UI를 동적으로 업데이트하는 중요한 역할을 합니다. useState를 사용하여 상태를 정의하고, setState로 이를 업데이트하며, 상태 변화에 따라 React는 UI를 자동으로 다시 렌더링합니다. 또한, 상태가 커지고 복잡해지면 useContext, Redux와 같은 라이브러리를 사용하여 상태를 효율적으로 관리할 수 있습니다.

React 애플리케이션에서 상태를 잘 관리하는 것은 성능 최적화와 유지보수를 쉽게 하는 핵심적인 요소이므로, 이를 이해하고 적절하게 사용하는 것이 중요합니다.