React Hooks를 활용한 상호작용적인 웹 애플리케이션 만들기 💻

React Hooks는 웹 개발의 세계에서 게임 체인저입니다. 이들을 통해 함수형 컴포넌트에서도 상태 관리와 생명주기 기능을 사용할 수 있게 되었습니다. 이 글에서는 React Hooks를 사용하여 상호작용적인 웹 애플리케이션을 만드는 방법을 소개하겠습니다. 복잡한 용어는 최대한 피하면서, 초보자도 이해할 수 있도록 설명하겠습니다.

useState 사용하기

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

import React, { useState } from 'react';

function UserInput() {
  const [input, setInput] = useState('');

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

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

이 코드는 사용자가 입력 필드에 무언가를 타이핑할 때마다 화면에 그 값을 실시간으로 보여줍니다.

useEffect 사용하기

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

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

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

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

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

이 예제에서는 컴포넌트가 처음 렌더링될 때 웹 API로부터 데이터를 가져와 화면에 표시합니다. []는 이 useEffect가 컴포넌트가 처음 마운트될 때만 실행되어야 함을 의미합니다.

custom Hooks 만들기

React Hooks를 사용하면 자주 사용하는 로직을 재사용 가능한 custom Hooks로 분리할 수 있습니다. 예를 들어, 위의 API 호출 예제를 custom Hook으로 만들어 보겠습니다.

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

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

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error:', error));
  }, [url]);

  return data;
}

function App() {
  const data = useFetchData('https://api.example.com/data');

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

이렇게 하면, 다양한 컴포넌트에서 API 호출 로직을 재사용할 수 있게 됩니다.

React Hooks를 사용하면 상태 관리와 사이드 이펙트 처리를 더 간결하고 직관적으로 할 수 있습니다. 이러한 기능을 활용하여 보다 상호작용적인 웹 애플리케이션을 만들어 보세요. Happy coding!