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

React Hooks는 웹 개발의 최신 트렌드 중 하나로, 함수형 컴포넌트에서 상태 관리와 생명주기 기능을 사용할 수 있게 해줍니다. 이를 통해 코드를 더 간결하고 이해하기 쉽게 만들 수 있어, 주니어 개발자들에게 매우 유용합니다. 오늘은 가장 많이 사용되는 몇 가지 Hooks를 살펴보고, 간단한 예제를 통해 그 사용법을 알아보겠습니다.

useState

useState는 가장 기본적인 Hook으로, 컴포넌트의 상태를 관리합니다. 아래 예제는 클릭할 때마다 숫자가 증가하는 버튼을 만드는 방법을 보여줍니다.

import React, { useState } from 'react';

function Counter() {
  // useState를 사용하여 count 상태를 선언하고 초기값으로 0을 설정합니다.
  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 [data, setData] = useState([]);

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

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

useContext

useContext는 전역 상태 관리가 필요할 때 유용한 Hook입니다. 이를 사용하면 컴포넌트 트리를 통해 데이터를 쉽게 전달할 수 있습니다.

import React, { useState, createContext, useContext } from 'react';

const CountContext = createContext();

function Counter() {
  const count = useContext(CountContext);
  return <div>현재 카운트: {count}</div>;
}

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

  return (
    <CountContext.Provider value={count}>
      <Counter />
      <button onClick={() => setCount(count + 1)}>클릭하여 증가</button>
    </CountContext.Provider>
  );
}

이처럼 React Hooks를 사용하면 함수형 컴포넌트에서도 상태 관리와 생명주기 기능을 쉽게 구현할 수 있습니다. 주니어 개발자 여러분, 이 기회에 React Hooks를 활용해 보세요!