리액트의 상태(State) 관리

소개

이 글에서는 리액트의 상태(state)에 대한 기본적인 이해를 다룰 것이다.

상태(State)란?

리액트의 상태는 간단히 말해 컴포넌트 내에서 관리되는 데이터이다.

이 데이터는 컴포넌트의 생명주기 동안 변할 수 있으며, 변화에 따라 UI가 업데이트된다.

상태의 생성과 초기화

리액트에서 상태를 사용하기 위해선 useState 훅을 이용한다.

예를 들어,

import React, { useState } from 'react';

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

  // 나머지 코드
}

위의 코드에서 count는 상태 변수이고, setCount는 상태를 변경하는 함수이다.

useState(0)은 초기 상태를 0으로 설정한다는 의미이다.

useState는 배열을 반환하므로 비구조화 할당을 통해 상태, 함수를 상수로 받아오면 편하다.

상태의 업데이트

상태는 주로 이벤트 핸들러나 비동기 작업 결과에 따라 업데이트된다.

예를 들어, 버튼 클릭 시 카운트를 증가시키는 코드는 다음과 같다.

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

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

상태의 전파

리액트에서는 상태를 부모에서 자식으로 전달할 수 있다.

부모 컴포넌트에서 상태를 정의하고, 이를 props로 자식 컴포넌트에 전달하는 방식이다.

상태의 관리 패턴

더 복잡한 애플리케이션에서는 상태 관리 라이브러리를 사용하기도 한다.

Redux, MobX, Recoil 등이 대표적인 상태 관리 라이브러리 중 하나이지만

이 글은 상태의 기초적인 내용이기 때문에 여기서는 다루지 않는다.

마무리

리액트의 상태는 컴포넌트 기반의 개발을 더욱 효과적으로 만들어주는 핵심 개념 중 하나이다.

상태 관리는 리액트 애플리케이션 개발에서 핵심 역할을 담당하고 있다.

이 글을 통해 상태의 기본 개념을 이해하고 기억하자.