React hooks - useState

useState는 React의 기본적인 상태 관리 훅 중 하나입니다.

컴포넌트 내부에서 상태를 관리할 수 있도록 해주며, 상태가 변할 때마다 컴포넌트가 리렌더링됩니다.

이 글에서는 useState의 사용 방법, 동작 원리, 그리고 주의사항에 대해 자세히 알아보겠습니다.

useState의 정의와 기본 문법

useState는 함수 컴포넌트에서 상태를 선언하고 관리하기 위해 사용됩니다.

const [state, setState] = useState < Type > initialState;

• useState는 초기 상태를 설정하고, 이를 관리하는 함수를 반환합니다.
• 타입을 명시하면, 상태 업데이트 시 타입이 일관성을 유지합니다.

useState의 기본 사용법

import React, { useState } from "react";

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

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

export default Counter;

• useState(0)을 사용하여 초기 상태값을 0으로 설정합니다.
• 상태를 변경할 때는 setCount 함수를 호출합니다.
• 상태가 변경되면 컴포넌트가 자동으로 리렌더링됩니다.

useState의 동작 원리

• 독립적인 상태 관리: 각 컴포넌트 인스턴스는 자신의 상태를 독립적으로 유지합니다.
• 배치 업데이트: React는 여러 상태 변경을 모아 한 번에 처리해 성능을 최적화합니다.
• 리렌더링 트리거: 상태가 변경되면 해당 컴포넌트가 자동으로 리렌더링됩니다.

useState에 함수형 업데이트

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

const increment = () => {
  setCount((prevCount) => prevCount + 1);
};

만약 상태 업데이트가 이전 상태에 의존한다면, 함수형 업데이트를 사용하는 것이 좋습니다.

상태 업데이트 함수에 콜백 함수를 전달하면, 이 함수의 인자로 이전 상태 값이 전달됩니다.

이를 통해 상태 변경이 비동기적으로 처리될 때 이전 상태를 안전하게 참조할 수 있습니다.

초기 상태를 함수로 설정

const [state, setState] = useState(() => {
  const initialState = computeExpensiveValue();
  return initialState;
});

만약, 초기 상태를 계산하는데 비용이 큰 경우, 함수를 사용하여 초기 상태를 설정할 수 있습니다.

초기화 함수는 컴포넌트가 처음 렌더링될 때 한 번만 호출됩니다.

이를 통해 불필요한 초기화 작업을 피할 수 있습니다.

상태 업데이트 주의사항

만약 상태를 객체로 관리할 때는 상태를 변경할 때마다 기존 상태를 복사해야 합니다.

직접 변경하면 불변성(immutability)을 위반할 수 있습니다.

배열 상태를 업데이트할 때도 불변성을 유지해야 합니다.

// 상태를 객체로 받음
const [user, setUser] = useState({ name: "Alice", age: 25 });

const updateUserName = () => {
  setUser((prevUser) => ({ ...prevUser, name: "Bob" }));
};

// 상태를 배열로 받음
const [items, setItems] = useState([1, 2, 3]);

const addItem = (newItem) => {
  setItems((prevItems) => [...prevItems, newItem]);
};

정리

useState는 React에서 가장 기본적인 상태 관리 훅으로, 컴포넌트 내부에서 간단하게 상태를 관리할 수 있게 도와줍니다.

상태가 복잡해지거나 여러 단계의 로직이 필요한 경우에는 useReducer와 같은 다른 훅의 사용을 고려해야 합니다.