주니어 개발자를 위한 React Hooks 활용하기

React는 웹 개발에서 가장 인기 있는 라이브러리 중 하나입니다. 특히, React Hooks는 컴포넌트 내에서 상태 관리와 생명주기 기능을 더 쉽게 사용할 수 있게 해줍니다. 이 글에서는 주니어 개발자들이 React Hooks를 어떻게 활용할 수 있는지 알아보겠습니다.

useState Hook 사용하기

useState는 가장 기본적인 Hook 중 하나로, 컴포넌트의 상태를 관리할 때 사용됩니다. 예를 들어, 사용자로부터 입력을 받아 저장하는 간단한 예제를 살펴봅시다.

import React, { useState } from 'react';

function ExampleComponent() {
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <p>입력한 값: {inputValue}</p>
    </div>
  );
}

이 코드는 사용자가 입력한 값을 inputValue 상태에 저장하고, 화면에 그 값을 보여줍니다. useState를 사용하여 상태를 쉽게 추가하고 관리할 수 있습니다.

useEffect Hook 사용하기

useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행하게 하는 Hook입니다. 예를 들어, 컴포넌트가 화면에 나타날 때 API로부터 데이터를 가져오는 경우를 생각해 봅시다.

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

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Fetching data failed', error));
  }, []); // 빈 배열은 컴포넌트가 마운트될 때만 실행되게 합니다.

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

이 예제에서는 useEffect를 사용하여 컴포넌트가 처음 렌더링될 때 데이터를 가져옵니다. 빈 배열 []은 이 효과가 컴포넌트의 마운트 시점에만 실행되어야 함을 의미합니다.

커스텀 Hooks 만들기

때로는 여러 컴포넌트에서 비슷한 로직을 재사용하고 싶을 때가 있습니다. 이럴 때 커스텀 Hooks를 만들어 사용할 수 있습니다. 예를 들어, 여러 컴포넌트에서 윈도우의 너비를 추적하는 로직을 재사용하고 싶다면 다음과 같이 할 수 있습니다.

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 MyComponent() {
  const width = useWindowWidth();

  return <p>현재 윈도우 너비는 {width}px입니다.</p>;
}

이 예제에서 useWindowWidth는 커스텀 Hook으로, 윈도우의 너비를 상태로 관리하고, 윈도우 크기가 변경될 때마다 이를 업데이트합니다. 이렇게 하면 윈도우 너비를 필요로 하는 모든 컴포넌트에서 이 커스텀 Hook을 재사용할 수 있습니다.

React Hooks는 상태 관리와 부수 효과를 다루는 새롭고 간결한 방법을 제공합니다. 주니어 개발자들이 이러한 Hooks를 활용하면, 더 깔끔하고 유지보수하기 쉬운 코드를 작성할 수 있습니다.