React Hooks를 활용한 상태 관리 팁과 트릭

React Hooks는 React 앱에서 상태 관리와 생명주기 기능을 더 쉽고 직관적으로 다룰 수 있게 해줍니다. 이 글에서는 Hooks를 사용하여 상태 관리를 더욱 효율적으로 할 수 있는 몇 가지 팁과 트릭을 공유하고자 합니다. 초보자도 쉽게 이해할 수 있도록 복잡한 용어는 사용하지 않겠습니다.

useState 사용하기

useState는 가장 기본적인 Hook으로, 컴포넌트의 상태를 관리할 수 있게 해줍니다. 아래 예시는 useState를 사용하여 클릭 횟수를 관리하는 방법을 보여줍니다.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>당신이 클릭한 횟수: {count} 번</p>
      <button onClick={() => setCount(count + 1)}>
        클릭하세요
      </button>
    </div>
  );
}

useEffect로 부작용 관리하기

useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있게 해주는 Hook입니다. 예를 들어, API에서 데이터를 가져오거나, 이벤트 리스너를 추가하는 등의 작업을 할 수 있습니다.

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

function UserData() {
  const [user, setUser] = useState({});

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

  return (
    <div>
      <p>사용자 이름: {user.name}</p>
    </div>
  );
}

custom Hooks 만들기

특정 로직을 여러 컴포넌트에서 재사용하고 싶다면, custom Hook을 만들어 사용할 수 있습니다. 예를 들어, 윈도우의 너비를 추적하는 custom Hook은 다음과 같이 만들 수 있습니다.

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

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

function App() {
  const width = useWindowWidth();

  return (
    <div>
      <p>현재 윈도우 너비: {width}px</p>
    </div>
  );
}

이러한 방법으로, React Hooks를 사용하여 상태 관리를 더욱 쉽고 효율적으로 할 수 있습니다. 코드 스니펫을 활용하여 실제 프로젝트에 적용해보세요. Happy coding!