본문으로 건너뛰기

State 소개와 좋은 State 이름

React에서 State는 컴포넌트 내부에서 동적으로 변할 수 있는 데이터를 의미합니다. State는 컴포넌트의 생명 주기 동안 유지되며, 컴포넌트의 UI를 업데이트하는 데 중요한 역할을 합니다. 이번 섹션에서는 State가 무엇인지, 그리고 좋은 State 이름을 짓는 방법에 대해 설명하겠습니다.

State란 무엇인가?​

State는 React 컴포넌트 내에서 동적으로 변하는 데이터를 저장하고 관리하는 방법입니다. 예를 들어, 사용자가 버튼을 클릭했을 때 버튼의 색깔이 바뀌거나, 입력 폼에 사용자가 텍스트를 입력할 때 그 내용을 저장하는 데 사용됩니다. State가 변경되면, React는 자동으로 해당 컴포넌트를 다시 렌더링하여 최신 UI를 보여줍니다.

예제: 간단한 카운터 컴포넌트​

다음은 버튼을 클릭할 때마다 숫자가 증가하는 간단한 카운터 컴포넌트를 만드는 예제입니다.

import React, { useState } from 'react';

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

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

export default Counter;

이 예제에서 useState는 현재 카운트(count)와 그 값을 업데이트하는 함수(setCount)를 반환합니다. 버튼을 클릭할 때마다 setCount 함수가 호출되어 count 값이 증가하고, 컴포넌트가 다시 렌더링됩니다.

좋은 State 이름 짓기​

State 이름은 코드의 가독성을 높이고 유지보수성을 향상시키는 데 중요한 역할을 합니다. 좋은 State 이름을 짓기 위한 몇 가지 팁을 소개합니다.

1. 의미 있는 이름 사용하기​

State 이름은 그 값이 어떤 의미를 가지는지 명확하게 나타내야 합니다. 예를 들어, 사용자의 이름을 저장하는 State라면 userName과 같이 명확한 이름을 사용합니다.

const [userName, setUserName] = useState('');

2. State의 목적을 반영하기​

State가 무엇을 나타내는지, 그리고 어떤 용도로 사용되는지를 반영하는 이름을 사용합니다. 예를 들어, 폼의 입력 상태를 나타내는 경우 inputValue와 같이 명확하게 짓습니다.

const [inputValue, setInputValue] = useState('');

3. Boolean 값은 is나 has로 시작하기​

Boolean 값을 저장하는 State의 경우, is나 has로 시작하는 이름을 사용하여 값을 이해하기 쉽게 만듭니다.

const [isLoading, setIsLoading] = useState(false);
const [hasError, setHasError] = useState(false);

주의사항​

State를 사용할 때 몇 가지 주의해야 할 점이 있습니다.

  • 불변성 유지: State를 직접 수정하지 말고, 항상 setState 함수를 사용하여 업데이트합니다. 이는 React가 변경 사항을 감지하고 컴포넌트를 다시 렌더링할 수 있게 합니다.
  • 최소한의 State: 필요한 최소한의 데이터만 State에 저장하여 불필요한 렌더링을 피합니다. State는 단순하고 관리하기 쉬운 구조를 유지해야 합니다.
  • 비동기 업데이트: setState 함수는 비동기적으로 동작할 수 있습니다. 따라서 State 업데이트 시 이전 값을 참조해야 하는 경우 함수형 업데이트를 사용합니다.
setCount(prevCount => prevCount + 1);

더 알아보기​

  • useState: React 공식 문서의 useState 섹션에서 더 많은 정보를 확인할 수 있습니다.
  • State 관리: 다양한 State 관리 방법과 모범 사례를 배우기 위해 React 문서의 State and Lifecycle 섹션을 참고하세요.

내용 요약과 다음 주제​

이번 섹션에서는 React의 State와 좋은 State 이름을 짓는 방법에 대해 알아보았습니다. State는 컴포넌트 내부에서 동적으로 변할 수 있는 데이터를 관리하며, 좋은 State 이름은 코드의 가독성과 유지보수성을 높여줍니다. 다음 주제인 State로 사용자 입력 관리에서는 사용자 입력을 효과적으로 관리하는 방법에 대해 다룹니다.