[React] Hooks: 초보부터 전문가까지 완벽 정복 🪝

React Hooks 톺아보기!🪝

React Hooks는 2018년에 도입된 기능으로, 함수형 컴포넌트에서 상태와 라이프사이클을 다룰 수 있게 해주는 도구입니다. Hooks는 React 개발 방식을 혁신적으로 변화시켰으며, 오늘날 함수형 컴포넌트가 클래스형 컴포넌트를 대체하게 된 핵심 이유입니다.

 

이번 글에서는 Hooks의 개념부터, 주요 Hooks와 활용법, 주의사항까지 폭넓게 다뤄볼게요!

---

Hooks란 무엇인가? 🤔

Hooks는 React 함수형 컴포넌트에서 상태 관리 및 라이프사이클 메서드를 사용할 수 있게 해주는 기능입니다.

 

Hooks의 탄생 배경

• 코드 가독성: 클래스형 컴포넌트는 복잡한 로직으로 인해 코드가 길고 가독성이 떨어지는 경우가 많았습니다.
• 재사용성 부족: 클래스형 컴포넌트에서는 비슷한 로직을 재사용하기 어렵고, HOC나 Render Props 같은 복잡한 패턴이 필요했습니다.
• 함수형 컴포넌트의 한계: Hooks 이전에는 함수형 컴포넌트에서 상태나 라이프사이클 메서드를 사용할 수 없었습니다.

Hooks의 특징

1. 완전한 함수형 컴포넌트 지원: 클래스형 컴포넌트를 사용할 필요 없이 모든 기능을 함수형 컴포넌트에서 구현할 수 있음
2. 코드 재사용성 증가: 커스텀 Hooks를 사용하면 로직을 재사용 가능하게 추출 가능
3. 점진적 도입: 기존 코드를 완전히 리팩토링할 필요 없이 필요한 부분에만 도입 가능
4. React 16.8 이상에서 사용 가능: Hooks는 React 16.8 버전부터 지원

---

주요 Hooks 🗂️

1. useState

• 역할: 상태 관리
• 사용법:

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

•  장점:
  • 간결한 상태 관리
  • 클래스형 컴포넌트의 this.state와 this.setState 대체

 

2. useEffect

• 역할: 컴포넌트의 라이프사이클 관리 (componentDidMount, componentDidUpdate, componentWillUnmount 대체)
• 사용법:

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

function Timer() {
  const [seconds, setSeconds] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);
    return () => clearInterval(interval); // Cleanup
  }, []); // 빈 배열로 첫 렌더링 시 1회 실행
  return <p>Seconds: {seconds}</p>;
}

• 특징:
  • 의존성 배열: 어떤 상태가 변경될 때만 실행할지 정의
  • Cleanup: 반환값으로 정리(clean-up) 로직을 작성

 

3. useContext

• 역할: Context API를 쉽게 사용할 수 있게 해줍니다.
• 사용법:

import React, { createContext, useContext } from "react";

const ThemeContext = createContext("light");

function ThemedComponent() {
  const theme = useContext(ThemeContext);
  return <p>Current theme: {theme}</p>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedComponent />
    </ThemeContext.Provider>
  );
}

• 장점:
  • 복잡한 Consumer 컴포넌트 트리 없이 Context 값에 접근 가능
  • 코드 가독성 향상

 

4. useRef

• 역할: DOM 요소 또는 변경 가능한 값을 참조
• 사용법:

import React, { useRef } from "react";

function TextInputFocus() {
  const inputRef = useRef();
  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

• 특징:
  • useRef는 상태와 달리 값이 변경되어도 리렌더링을 발생시키지 않음

 

5. useReducer

• 역할: 복잡한 상태 관리를 위한 대체 옵션 (useState 대체)
• 사용법:

import React, { useReducer } from "react";

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
    </div>
  );
}

• 장점:
  • 상태 업데이트 로직을 컴포넌트 외부로 분리 가능
  • 상태 업데이트가 복잡한 경우 적합

 

6. useMemo & useCallback

• 역할: 불필요한 연산 및 함수 재생성을 방지하여 성능 최적화
• 사용법:

import React, { useState, useMemo, useCallback } from "react";

function ExpensiveComponent({ compute, number }) {
  console.log("Rendering...");
  return <p>Result: {compute(number)}</p>;
}

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

  const compute = useCallback((number) => number * 2, []);
  const expensiveValue = useMemo(() => value * 100, [value]);

  return (
    <div>
      <ExpensiveComponent compute={compute} number={value} />
      <p>Expensive Value: {expensiveValue}</p>
      <button onClick={() => setCount(count + 1)}>Re-render</button>
    </div>
  );
}

• 특징:
  • useMemo: 값의 캐싱
  • useCallback: 함수의 재생성 방지

---

Hooks 사용 시 주의사항⚠️

1. Hooks는 최상위에서만 호출
   • 조건문, 반복문, 중첩된 함수 내에서 호출하면 안 됩니다.
   • React가 Hooks 호출 순서를 보장하지 못하기 때문입니다.
2. React 함수형 컴포넌트 내에서만 사용
   • 클래스형 컴포넌트 또는 일반 함수에서는 사용할 수 없습니다.
3. 의존성 배열 관리
   • useEffect나 useMemo에서 의존성 배열을 잘못 설정하면 예상치 못한 동작이 발생할 수 있습니다.

---

Hooks로 작성한 실무 예제 💼

React 애플리케이션에서 다수의 Hooks를 조합해 사용하면 강력한 기능을 구현할 수 있습니다.

 

예제: 할 일 관리 앱

import React, { useState, useReducer, useRef } from "react";

function reducer(todos, action) {
  switch (action.type) {
    case "add":
      return [...todos, { id: Date.now(), text: action.payload, done: false }];
    case "toggle":
      return todos.map((todo) =>
        todo.id === action.payload ? { ...todo, done: !todo.done } : todo
      );
    case "delete":
      return todos.filter((todo) => todo.id !== action.payload);
    default:
      return todos;
  }
}

function TodoApp() {
  const [todos, dispatch] = useReducer(reducer, []);
  const [text, setText] = useState("");
  const inputRef = useRef();
  const addTodo = () => {
    if (text.trim()) {
      dispatch({ type: "add", payload: text });
      setText("");
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <input
        ref={inputRef}
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Add a task"
      />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <span
              style={{ textDecoration: todo.done ? "line-through" : "none" }}
              onClick={() => dispatch({ type: "toggle", payload: todo.id })}
            >
              {todo.text}
            </span>
            <button onClick={() => dispatch({ type: "delete", payload: todo.id })}>
              Delete
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

---

Hooks의 장점 요약 🗂️

• 코드 간결성
• 로직 재사용성 증가
• 클래스형 컴포넌트의 복잡한 패턴 제거
• 상태 관리 및 성능 최적화

 

🌷전설의 개발자가 되어봅시당! 🌷