[React] 리액트 State와 useState

React에서 상태(state)는 컴포넌트가 기억하고 관리해야 할 동적인 데이터를 의미합니다. 웹 애플리케이션은 사용자와의 상호작용에 따라 화면이 변경되기 때문에, 상태를 제대로 관리하는 것이 매우 중요합니다. 특히 함수형 컴포넌트에서는 useState라는 Hook을 사용하여 상태를 관리할 수 있습니다. 이 글에서는 state의 개념과 useState Hook의 사용법, 그리고 상태 관리의 핵심 개념에 대해 알아보겠습니다.

 

 

react state - 커버이미지

 

목차

1. State란?

2. State의 중요성

3. useState란?

4. useState 불변성 유지

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

1. State란?

state는 React 컴포넌트에서 변경될 수 있는 데이터를 가리킵니다. 컴포넌트는 상태를 통해 동적인 UI를 만들고, 사용자의 입력에 따라 그 상태가 변할 때마다 화면을 다시 렌더링 합니다.

function App() {
  return <h1>Hello, React!</h1>;
}

 

위 코드에서는 고정된 텍스트를 렌더링 합니다. 하지만 사용자의 상호작용에 따라 텍스트가 변해야 한다면, 상태가 필요합니다.

 

2. State의 중요성

웹 애플리케이션은 동적으로 작동합니다. 즉, 사용자와 상호작용하면서 화면의 내용이 변할 필요가 있습니다. 버튼을 클릭할 때마다 카운터가 증가하거나, 입력 필드에 사용자가 입력한 내용이 반영되는 등, 다양한 동작이 상태에 의존합니다.

 

State가 없다면

• UI는 정적인 정보만 제공할 수 있습니다.
• 사용자 상호작용에 따른 변화를 표현할 수 없습니다.

따라서 상태는 UI 업데이트의 핵심 요소이며, React 컴포넌트에서 상태 관리가 필요합니다.

 

3. useState란?

React의 useState Hook은 함수형 컴포넌트에서 상태를 관리하는 가장 기본적인 방법입니다. 이 Hook을 사용하면 컴포넌트 내부에서 상태 값을 선언하고, 그 상태 값을 변경할 수 있는 함수를 반환받을 수 있습니다.

const [state, setState] = useState(initialValue);

• state: 현재 상태 값을 나타냅니다.
• setState: 상태를 업데이트하는 함수입니다.
• initialValue: 상태의 초기 값입니다. 초기값은 숫자뿐만 아니라, 문자열, 배열, 객체 등 다양한 자료형이 가능합니다.

아래 예제는 버튼을 클릭할 때마다 카운터 값을 증가시키는 코드입니다. 예제를 통해 useState를  쉽게 이해할 수 있습니다.

import React, { useState } from 'react';

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

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

export default Counter;

 

• useState(0): count라는 상태를 선언하고 초기 값을 0으로 설정합니다.
• setCount: count를 업데이트할 때 사용하는 함수입니다.
• 버튼을 클릭할 때마다 count 값이 1씩 증가합니다.

 

 

4. useState 불변성 유지

상태를 객체나 배열로 관리할 때는 불변성(immutability)을 유지하는 것이 중요합니다. 상태를 직접 수정하는 대신, 새로운 값을 생성하여 업데이트해야 React가 변경 사항을 감지하고 UI를 적절하게 업데이트할 수 있습니다.

const [user, setUser] = useState({ name: 'Kim', age: 20 });

function updateUser() {
  setUser(prevUser => ({
    ...prevUser, // 이전 상태를 복사
    age: 30     // age만 업데이트
  }));
}

 

위 예시는 기존 user 객체를 직접 수정하지 않고, 새로운 객체를 만들어 상태를 업데이트하는 방식입니다.

 

 

 

 

React에서 state는 사용자와의 상호작용에 따라 변하는 데이터를 관리하는 핵심적인 개념입니다. useState Hook을 사용하면 함수형 컴포넌트에서도 손쉽게 상태를 관리하고, UI 업데이트를 효율적으로 처리할 수 있습니다.

useState를 적절하게 활용하면 동적인 애플리케이션을 보다 쉽게 만들 수 있으며, 상태 관리가 복잡해질 때에도 React의 다른 Hook들과 결합해 유연하게 대처할 수 있습니다. React의 상태 관리에 대한 기본 개념을 확실히 이해하고, 다양한 상황에서 상태를 효율적으로 관리하는 방법을 익혀보세요😄

 

 

 

추천글

2024.09.28 - [개발 공부 일지/React] - [React] 리액트 Props란?

[React] 리액트 Props란?

2024.09.28 - [개발 공부 일지/React] - [React] 리액트 컴포넌트란?

[React] 리액트 컴포넌트란?