React | 상태관리와 useState

상태관리

React의 상태 관리는 컴포넌트가 데이터를 저장하고, 그 데이터를 기반으로 UI를 업데이트하는 핵심 기능임

React에서는 상태(state)를 사용하여 컴포넌트가 가진 형재 데이터를 저장하고, 이 데이터가 변경될 때 자동으로 UI를 다시 렌더링하여 반영하게 함

 

React 상태 관리의 역할

React의 상태 관리는 UI의 일관성을 유지하고, 데이터가 변경될 때마다 해당 부분만 다시 렌더링하여 성능을 최적화하는 것을 목표로 함

각 컴포넌트는 독립적인 상태를 가질 수 있으며, 부모와 자식 컴포넌트 간에 데이터를 props를 통해 전달하면서 전체 UI를 구성할 수 있음

 

---

useState

React에서 함수형 컴포넌트의 상태를 관리할 때 useState 훅을 사용

useState는 상태 변수와 상태 업데이트 함수를 제공하여 컴포넌트의 특정 값(예: 입력 값, 카운터 값 등)을 저장하고, 그 값이 변할 때마다 UI에 반영되도록 함

 

기본 사용법

import React, { useState } from 'react';

function Counter() {
  // count라는 상태 변수와 이를 업데이트할 setCount 함수 생성
  const [count, setCount] = useState(0); // 초기값은 0

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

• count : 현재 상태값, count를 통해 상태값을 읽을 수 있음
• setCount : 새로운 값을 설정하고 컴포넌트를 다시 렌더링하는 함수
• useState(0) : 초기값을 0으로 지정. 이 값은 컴포넌트가 마운트될 때 한 번 설정 됨

 

useState로 상태 관리하기

React의 상태는 불변성을 유지하는 것이 중요함

배열이나 객체와 같은 참조형 데이터를 다룰 때는 새로운 배열이나 객체를 만들어 업데이트하는 것이 React 상태 관리의 기본 원칙

const [items, setItems] = useState([]);

function addItem(item) {
  setItems(prevItems => [...prevItems, item]);
}

위 예시에서 addItem 함수는 이전 상태를 복사하여 새로운 값을 추가하는 방식으로 items상태를 업데이트 함

상태를 직접 수정하지 않고, 항상 새로운 값을 할당해야 함

 

---

상태 관리가 필요한 이유

• UI의 동적 업데이트 : 상태가 변경되면 React가 해당 컴포넌트만 다시 렌더링하여 변경 사항을 UI에 반영함
• 성능 최적화 : 변경된 컴포넌트만 렌더링하므로, 전체 DOM을 다시 그리는 것보다 성능이 좋음
• 데이터 흐름의 일관성 : 상태를 통해 컴포넌트 간의 데이터 흐름을 명확히 하고, 예측 가능한 방식으로 UI를 관리할 수 있음

 

---

React 상태 관리의 한계와 해결책

useState는 로컬 상태 관리에 유용하지만, 복잡한 애플리케이션에서는 컴포넌트 간의 상태 공유와 데이터 흐름이 어려워질 수 있음

이 경우, 전역 상태 관리가 필요할 수 있음

React는 이런 문제를 해결하기 위해 ContextAPI, Redux 등 여러 상태 관리 도구를 제공함