[React] useState와 useEffect를 사용한 상태 관리

React의 함수형 컴포넌트에서 상태와 생명주기 이벤트를 관리하기 위해 주로 useState와 useEffect 훅이 사용됩니다. 이들은 React 앱에서 데이터의 변화를 추적하고, 컴포넌트의 렌더링 전후에 특정 작업을 수행할 수 있게 해줍니다.

useState

useState 훅은 함수형 컴포넌트에서 상태를 관리할 수 있게 해줍니다. 각 상태는 컴포넌트 내에서 유지되며, 컴포넌트가 재렌더링될 때까지 유지됩니다.

사용법:

import React, { useState } from 'react';

function Example() {
  // "count"라는 새 상태 변수를 선언하고, 이를 업데이트하기 위한 함수(setCount)를 제공합니다.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect

useEffect 훅은 컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있게 해주며, 클래스 컴포넌트의 생명주기 메서드인 componentDidMount, componentDidUpdate, componentWillUnmount를 대체할 수 있습니다.

사용법:

import React, { useState, useEffect } from 'react';

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

  // 컴포넌트가 렌더링될 때마다 특정 작업을 수행합니다.
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

조합하여 사용하기

useState와 useEffect를 조합하면, 컴포넌트의 상태에 따라 부수 효과(side effects)를 관리할 수 있습니다. 예를 들어, 사용자가 버튼을 클릭할 때마다 카운터가 증가하고, 이 변경은 문서의 타이틀을 업데이트하는 데 사용됩니다.

결론

useState와 useEffect는 React에서 함수형 컴포넌트를 사용하여 상태 관리와 부수 효과를 처리하는 강력한 방법입니다. 이 훅들을 통해 클래스 컴포넌트에서만 가능했던 다양한 기능들을 더 간단하고 선언적인 코드로 구현할 수 있습니다. 상태와 생명주기 관련 로직을 효율적으로 관리하면서, 더 읽기 쉽고 유지 관리가 쉬운 컴포넌트를 만들 수 있습니다.