리액트에서 State는 컴포넌트의 변경 가능한 데이터를 관리하는 중요한 개념입니다. UI는 이 상태 값에 따라 동적으로 변하고, 리액트는 상태가 변경될 때마다 해당 컴포넌트를 자동으로 다시 렌더링하여 UI를 갱신합니다.

이 글에서는 리액트에서 State가 무엇인지, 어떻게 사용하는지, 그리고 어떻게 상태 변경이 컴포넌트에 영향을 미치는지에 대해 다뤄보겠습니다.

1. State란 무엇인가?

리액트에서 State는 컴포넌트의 데이터를 저장하는 객체입니다. 이 데이터는 사용자 인터페이스에 영향을 주며, 컴포넌트가 다시 렌더링되도록 트리거할 수 있습니다. 상태는 컴포넌트가 "변경 가능한" 데이터를 관리할 때 사용됩니다. 예를 들어, 버튼 클릭 후 텍스트를 바꾸거나, 사용자의 입력에 따라 UI를 갱신할 때 상태를 사용합니다.

중요한 규칙 ‼️

• 상태는 변경 가능한 값이어야 합니다. 불변 값은 상태로 관리할 필요가 없습니다.
• 상태는 컴포넌트의 동적 데이터만 포함해야 하며, UI에 영향을 미치는 값만 상태로 관리해야 합니다.

2. SPA와 State의 관계

SPA(Single Page Application)는 리액트 애플리케이션의 기본 아키텍처입니다. 리액트에서 SPA는 페이지를 새로 고침하지 않고, 필요한 부분만 동적으로 업데이트하는 방식으로 동작합니다. 리액트는 컴포넌트 단위로 UI를 구성하고, 상태(State) 변경 시 해당 컴포넌트만 다시 렌더링합니다. 이로 인해 전체 페이지가 아닌 부분적으로만 UI를 갱신할 수 있으며, 사용자 경험(UX)을 향상시킬 수 있습니다.

따라서 State는 SPA에서 UI의 상태 변화를 관리하고, 컴포넌트가 필요한 데이터만 렌더링하도록 하는 핵심적인 역할을 합니다.

3. State의 정의와 사용법

리액트에서는 클래스 기반 컴포넌트와 함수형 컴포넌트로 컴포넌트를 정의할 수 있습니다. 하지만 최근에는 함수형 컴포넌트가 주로 사용됩니다.이 글에서는 함수형 컴포넌트와 useState() 훅을 중심으로 다루겠습니다.

함수형 컴포넌트에서의 State 사용

리액트의 함수형 컴포넌트에서는 useState() 훅(Hook)을 사용하여 상태를 정의하고, 그 값을 업데이트할 수 있습니다. 아래 예시는 useState()를 사용한 간단한 컴포넌트입니다.

useState() 훅 사용법

• useState(initialValue)는 상태의 초기값을 전달받고, 상태 값과 그 값을 업데이트하는 함수를 반환합니다.
• 예를 들어, count [count, setCount] = useState(0);
  - count는 현재 상태 값을 의미합니다.
  - setCount는 상태 값을 변경하는 함수입니다.
  
• 중요한 점
  - 상태가 변경되면 리액트는 자동으로 컴포넌트를 다시 렌더링합니다.
  - 불변성을 유지해야 하므로 상태를 직접적으로 수정해서는 안 됩니다. 대신 setState나 setCount와 같은 상태 변경 함수를 사용하여 상태를 갱신해야 합니다.

예제 코드

function Counter() {
    // useState 훅으로 상태 정의
    // 초기값을 0으로 설정
    const [count, setCount] = useState(0);

    // 버튼 클릭 시 상태 변경
    const increment = () => setCount(count + 1);

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

export default Counter;

버튼을 누를 때 마다 페이지가 새로고침되는 것이 아닌 숫자만 다시 렌더링됩니다.