React Hooks를 활용한 상태 관리 팁

React Hooks는 React 16.8에서 도입된 기능으로, 함수형 컴포넌트에서 상태 관리와 사이드 이펙트를 처리할 수 있게 해줍니다. 이 글에서는 React Hooks를 사용하여 상태 관리를 보다 효율적으로 할 수 있는 몇 가지 팁을 공유하고자 합니다.

useState 사용하기

useState는 가장 기본적인 Hook으로, 컴포넌트의 상태를 관리할 수 있게 해줍니다. 간단한 카운터 예제를 통해 useState의 사용 방법을 살펴보겠습니다.

import React, { useState } from 'react';

function Counter() {
  // count라는 상태 변수를 선언하고, 이를 업데이트하는 함수로 setCount를 사용합니다.
  const [count, setCount] = useState(0);

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

이 예제에서는 useState를 사용하여 count라는 상태 변수를 만들고, 이 변수를 업데이트하는 setCount 함수를 함께 선언합니다. 버튼을 클릭할 때마다 setCount 함수를 호출하여 count의 값을 변경합니다.

useEffect 사용하기

useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있게 해주는 Hook입니다. 예를 들어, 컴포넌트가 화면에 나타날 때 API에서 데이터를 가져오는 경우에 사용할 수 있습니다.

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

function UserData() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // 빈 배열을 전달하여 컴포넌트가 마운트될 때만 실행되도록 합니다.

  return (
    <div>
      {data.map(item => (
        <p key={item.id}>{item.title}</p>
      ))}
    </div>
  );
}

이 예제에서는 useEffect를 사용하여 컴포넌트가 처음 렌더링될 때 외부 API에서 데이터를 가져옵니다. 빈 배열 []을 useEffect의 두 번째 인자로 전달함으로써, 이 코드가 컴포넌트가 마운트될 때만 실행되도록 합니다.

custom Hooks 만들기

복잡한 로직을 여러 컴포넌트에서 재사용하고 싶을 때 custom Hooks를 만들 수 있습니다. 예를 들어, 특정 키 입력을 감지하는 로직을 custom Hook으로 만들어 보겠습니다.

import { useState, useEffect } from 'react';

function useKeyPress(targetKey) {
  const [keyPressed, setKeyPressed] = useState(false);

  useEffect(() => {
    function downHandler({ key }) {
      if (key === targetKey) {
        setKeyPressed(true);
      }
    }

    function upHandler({ key }) {
      if (key === targetKey) {
        setKeyPressed(false);
      }
    }

    window.addEventListener('keydown', downHandler);
    window.addEventListener('keyup', upHandler);

    return () => {
      window.removeEventListener('keydown', downHandler);
      window.removeEventListener('keyup', upHandler);
    };
  }, [targetKey]);

  return keyPressed;
}

이 custom Hook은 useKeyPress라고 하며, 특정 키가 눌렸는지 여부를 감지합니다. 이 Hook을 사용하면 간단하게 키 입력 상태를 관리할 수 있게 됩니다.

React Hooks를 활용하면 함수형 컴포넌트에서도 상태 관리와 사이드 이펙트를 쉽게 처리할 수 있습니다. 이 글에서 소개한 팁들을 활용하여 보다 효율적인 컴포넌트를 만들어 보세요.