[React] Hooks 기초부터 마스터! useState, useEffect 완벽 활용법🧵

React의 가장 강력한 기능 중 하나인 Hooks! 🧵 React 16.8에서 도입된 이후, Hooks는 함수형 컴포넌트를 더욱 간단하고 강력하게 만들어줬어요. 이번 포스팅에서는 기본 Hook인 useState와 useEffect를 중심으로 살펴보고, 실전에서 활용할 수 있는 예제도 함께 다뤄볼게요! 🎉

---

반응형

1. React Hooks란? 🤔

Hooks는 클래스형 컴포넌트에서만 사용할 수 있었던 상태 관리와 생명주기 메서드를 함수형 컴포넌트에서도 사용할 수 있도록 해줍니다. 주요 특징은 다음과 같아요:

1. 함수형 컴포넌트에서 상태와 사이드 이펙트를 관리할 수 있다.
2. 클래스형 컴포넌트보다 코드가 간결하고 가독성이 좋아진다.
3. 재사용 가능한 상태 관리 로직을 작성할 수 있다.

---

2. useState – 상태 관리의 기본 🌱

useState는 컴포넌트 내에서 상태를 추가하고 업데이트할 수 있는 Hook이에요. 사용법은 매우 간단합니다:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 상태 변수와 상태 업데이트 함수 선언

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

작동 원리

• useState는 상태 변수와 상태를 업데이트할 수 있는 함수를 반환합니다.
• 초기값을 인자로 전달하며, 상태 업데이트 시 컴포넌트가 다시 렌더링됩니다.

상태 관리가 필요한 모든 곳에서 useState를 자유롭게 사용할 수 있어요! 🌟

---

3. useEffect – 사이드 이펙트 관리 🔄

useEffect는 컴포넌트가 렌더링된 이후에 특정 로직을 실행할 수 있는 Hook이에요. 주로 API 호출, DOM 조작, 또는 구독 설정과 해제에 사용됩니다.

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

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setSeconds((prevSeconds) => prevSeconds + 1);
    }, 1000);

    return () => clearInterval(timer); // 컴포넌트 언마운트 시 타이머 정리
  }, []); // 빈 배열을 전달하여 마운트/언마운트 시에만 실행

  return <h1>Elapsed time: {seconds} seconds</h1>;
}

작동 원리

1. useEffect는 기본적으로 모든 렌더링 이후에 실행됩니다.
2. 의존성 배열을 전달하여 실행 시점을 제어할 수 있습니다:
   • 빈 배열 []: 컴포넌트 마운트/언마운트 시 한 번 실행
   • 특정 값이 포함된 배열 [value]: 해당 값이 변경될 때만 실행

useEffect를 잘 활용하면 생명주기 메서드 없이도 모든 컴포넌트 로직을 관리할 수 있어요! 💪

---

4. 실전 예제 – API 호출 처리하기 🌐

useEffect와 useState를 활용해 간단한 사용자 목록을 불러오는 컴포넌트를 만들어볼게요.

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

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then((data) => {
        setUsers(data);
        setLoading(false);
      });
  }, []); // 빈 배열: 마운트 시 한 번 실행

  if (loading) {
    return <h1>Loading...</h1>;
  }

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

동작 설명

1. 컴포넌트가 마운트되면 useEffect가 호출되고, API에서 데이터를 가져옵니다.
2. 데이터를 성공적으로 가져오면 setUsers를 통해 상태를 업데이트합니다.
3. loading 상태가 false로 변경되면서 사용자 목록이 렌더링됩니다.

---

5. 추가적인 Hook – useContext 활용하기 🤝

useContext는 전역 상태를 관리할 때 유용한 Hook이에요. Context API와 함께 사용되며, props drilling을 방지할 수 있습니다. 간단한 테마 전환 예제를 통해 알아볼까요?

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

const ThemeContext = createContext();

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <button
      style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}
      onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
    >
      Toggle Theme
    </button>
  );
}

export default App;

작동 원리

• createContext로 Context를 생성하고 Provider를 통해 데이터를 전달합니다.
• 하위 컴포넌트에서 useContext를 사용해 Context 값을 손쉽게 접근합니다.

---

6. 마무리 🎯

React Hooks는 함수형 컴포넌트를 더욱 강력하게 만들어줍니다. useState, useEffect, 그리고 useContext를 활용하면 복잡한 상태와 로직도 간단히 관리할 수 있어요.

이번 포스팅에서 다룬 기초 Hook을 잘 익히고, 실전 예제를 직접 따라 해보세요! React 개발에서 자신감을 가질 수 있을 거예요. 😄

더욱 다양한 Hook이 존재하니, 다음엔 useReducer, useMemo 같은 고급 Hook도 함께 배워봅시다! 🚀