React Hooks 기초 완벽 가이드

React Hooks의 핵심 개념을 초급 개발자를 위해 쉽게 설명합니다. useState, useEffect 등 필수 Hooks를 실제 예제와 함께 학습할 수 있습니다.

---

---

들어가며

이 글에서는 React Hooks 기초 완벽 가이드에 대해 상세히 알아보겠습니다. 총 8가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. useState_기본_사용법
2. 여러_개의_State_관리
3. useEffect_기본_사용법
4. useEffect_의존성_배열
5. 조건부_렌더링과_State
6. 객체_State_업데이트
7. 배열_State_업데이트
8. Custom_Hook_만들기

---

1. useState 기본 사용법

개요

useState는 함수형 컴포넌트에서 상태를 관리할 수 있게 해주는 가장 기본적인 Hook입니다.

코드 예제

import { useState } from 'react';

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

  return (
    <button onClick={() => setCount(count + 1)}>
      클릭 횟수: {count}
    </button>
  );
}

설명

useState(0)으로 초기값 0을 설정하고, count로 값을 읽고 setCount로 값을 변경합니다. 버튼 클릭 시 count가 1씩 증가합니다.

---

2. 여러 개의 State 관리

개요

하나의 컴포넌트에서 여러 개의 state를 독립적으로 관리할 수 있습니다.

코드 예제

function UserForm() {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);

  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <input value={age} onChange={(e) => setAge(e.target.value)} />
    </div>
  );
}

설명

name과 age를 각각 독립적인 state로 관리하며, 각 input의 onChange 이벤트로 값을 업데이트합니다.

---

3. useEffect 기본 사용법

개요

useEffect는 컴포넌트가 렌더링될 때 특정 작업을 수행할 수 있게 해주는 Hook입니다.

코드 예제

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const interval = setInterval(() => setSeconds(s => s + 1), 1000);
    return () => clearInterval(interval);
  }, []);

  return <div>경과 시간: {seconds}초</div>;
}

설명

컴포넌트가 마운트되면 1초마다 seconds를 증가시키고, 언마운트 시 clearInterval로 정리합니다. 빈 배열 []은 최초 1회만 실행됨을 의미합니다.

---

4. useEffect 의존성 배열

개요

useEffect의 두 번째 인자로 의존성 배열을 전달하여 특정 값이 변경될 때만 실행되도록 제어할 수 있습니다.

코드 예제

function SearchResults({ query }) {
  const [results, setResults] = useState([]);

  useEffect(() => {
    fetch(`/api/search?q=${query}`)
      .then(res => res.json())
      .then(data => setResults(data));
  }, [query]);

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

설명

query 값이 변경될 때마다 API를 호출하여 새로운 검색 결과를 가져옵니다. [query]를 의존성 배열로 지정했기 때문입니다.

---

5. 조건부 렌더링과 State

개요

state 값에 따라 다른 UI를 보여주는 조건부 렌더링을 구현할 수 있습니다.

코드 예제

function LoginButton() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      {isLoggedIn ? (
        <button onClick={() => setIsLoggedIn(false)}>로그아웃</button>
      ) : (
        <button onClick={() => setIsLoggedIn(true)}>로그인</button>
      )}
    </div>
  );
}

설명

isLoggedIn state에 따라 로그인/로그아웃 버튼을 다르게 표시하며, 버튼 클릭으로 상태를 토글합니다.

---

6. 객체 State 업데이트

개요

객체 형태의 state를 업데이트할 때는 스프레드 연산자를 사용하여 불변성을 유지해야 합니다.

코드 예제

function Profile() {
  const [user, setUser] = useState({ name: '', email: '' });

  const updateName = (name) => {
    setUser({ ...user, name });
  };

  return <input onChange={(e) => updateName(e.target.value)} />;
}

설명

...user로 기존 객체를 복사한 후 name만 변경하여 새로운 객체를 생성합니다. 이렇게 불변성을 유지해야 React가 변경을 감지합니다.

---

7. 배열 State 업데이트

개요

배열 state에 새 항목을 추가하거나 삭제할 때도 불변성을 유지하며 업데이트해야 합니다.

코드 예제

function TodoList() {
  const [todos, setTodos] = useState([]);

  const addTodo = (text) => {
    setTodos([...todos, { id: Date.now(), text }]);
  };

  const removeTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };
}

설명

추가할 때는 스프레드 연산자로 기존 배열을 복사하고, 삭제할 때는 filter로 새 배열을 생성합니다.

---

8. Custom Hook 만들기

개요

반복되는 로직을 Custom Hook으로 추출하여 재사용할 수 있습니다.

코드 예제

function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  const onChange = (e) => setValue(e.target.value);
  const reset = () => setValue(initialValue);

  return { value, onChange, reset };
}

function Form() {
  const name = useInput('');
  return <input {...name} />;
}

설명

useInput이라는 Custom Hook으로 input 관리 로직을 재사용 가능하게 만들었습니다. 여러 컴포넌트에서 동일한 패턴을 쉽게 적용할 수 있습니다.

---

마치며

이번 글에서는 React Hooks 기초 완벽 가이드에 대해 알아보았습니다. 총 8가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#React #Hooks #useState #useEffect #CustomHooks