React useState로 상태값 선언과 업데이트, 실전 활용법 배우기

React에서 useState로 상태값 선언하기

리액트(React)를 사용하면서 가장 먼저 배우게 되는 개념 중 하나는 바로 상태(state)입니다. 상태 관리에서 빼놓을 수 없는 훅이 바로 useState 인데요, 이번 글에서는 useState의 기본 개념부터 실무에서의 활용법, 그리고 흔히 발생하는 오류와 그 해결책에 대해 알아보겠습니다.

React useState의 기본 사용법

useState는 함수형 컴포넌트에서 상태를 관리하기 위해 사용하는 훅입니다. 상태값과 상태를 갱신하는 함수를 반환하죠.

import React, { useState } from 'react';

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

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

이 기본 예제에서는 버튼을 클릭할 때마다 count 상태가 업데이트되어 화면에 반영됩니다. 간단하지만 리액트의 재사용성을 나타내는 좋은 예입니다.

실무에서 useState 활용하기

실제로 사용하다 보면 상태값의 타입이 다양하게 변할 수 있습니다. 예를 들어 객체나 배열을 상태로 관리해야 하는 경우도 흔한데요. 이러한 경우를 어떻게 처리해야 할지 알아보겠습니다.

객체로 상태 관리하기

객체 형태의 상태를 관리할 때는 부분 업데이트가 필요할 수 있습니다. 예를 들어, 사용자의 프로필 데이터를 관리한다고 해봅시다.

import React, { useState } from 'react';

function UserProfile() {
  const [profile, setProfile] = useState({ name: '', age: null });

  const updateName = (newName) => {
    setProfile({ ...profile, name: newName });
  };

  return (
    <div>
      <input
        type="text"
        value={profile.name}
        onChange={(e) => updateName(e.target.value)}
      />
      <p>사용자 이름: {profile.name}</p>
    </div>
  );
}

스프레드 연산자(...)를 사용해 기존의 객체 속성을 유지하면서 특정 값을 업데이트할 수 있습니다.

흔히 발생하는 오류와 해결법

useState를 사용할 때 발생할 수 있는 몇 가지 오류와 그 해결책을 알아보겠습니다.

초기값 문제

useState에서 초기값을 적절히 설정하지 않으면 undefined 오류가 발생할 수 있습니다. 초기값 설정 시 타입을 명확히 합니다.

const [items, setItems] = useState([]); // 배열의 초기값은 빈 배열
const [selectedItem, setSelectedItem] = useState(null); // 객체 혹은 값의 초기값

상태 배치 경합

여러 상태 업데이트가 동시에 발생할 때 경합 조건(race condition)이 생길 수 있습니다. 이를 방지하려면 상태 업데이트 함수에 이전 상태를 인자로 받는 콜백을 사용할 수 있습니다.

setCount((prevCount) => prevCount + 1);

결론

리액트에서 useState 훅은 상태값을 관리하는 매우 중요한 도구입니다. 기본 사용법을 넘어 객체 및 배열 등 다양한 형태의 상태를 다루는 방법과, 흔히 발생하는 오류까지 알아보았습니다. 여러분이 만약 직접 개발을 하게 된다면, 어떤 챌린지를 주로 마주할 것 같은가요?