3. React Hooks 알아보기

3.1 React Hooks 개요

• 정의:
  • React Hooks는 React 16.8부터 도입된 기능으로, 함수형 컴포넌트에서도 클래스형 컴포넌트와 동일한 기능(상태 관리, 라이프사이클 관리 등)을 사용할 수 있게 해줍니다.
  • 핵심 개념:
    • 함수형 컴포넌트 안에서 상태(state) 관리, 부수 효과(side effects), 메모이제이션 등 다양한 기능을 간단한 API로 제공
• 왜 Hooks를 사용하는가?
  • 간결한 코드 작성: 클래스의 복잡한 생명주기 메서드 없이 코드가 더 직관적입니다.
  • 재사용성: 커스텀 Hooks를 생성해 여러 컴포넌트에서 로직을 재사용할 수 있습니다.
  • 가독성과 유지보수: 코드가 기능별로 분리되어 있어 가독성이 좋고, 변경 사항 파악이 용이합니다.
• Hook 사용 규칙:
  1. 최상위에서 호출:
     • 반복문, 조건문 또는 중첩된 함수 내에서 호출하지 않고, 컴포넌트의 최상위 레벨에서 호출해야 합니다.
  2. React 함수 컴포넌트 또는 커스텀 Hook 내에서만 호출:
     • 일반 JavaScript 함수에서는 사용하면 안 됩니다.

3.2 주요 Hooks 소개 및 예시

3.2.1 useState

• 용도:

  • 함수형 컴포넌트에서 상태(state)를 관리하기 위한 Hook입니다.

• 동작 원리:

  • 초기값을 인자로 전달하고, 현재 상태값과 이를 업데이트하는 함수를 반환합니다.
  • 상태 업데이트 시 컴포넌트가 다시 렌더링됩니다.

• 사용 예시:

  import React, { useState } from "react";
  
  const Counter = () => {
    const [count, setCount] = useState(0); // 초기 값 0
  
    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>Click me</button>
      </div>
    );
  };
  
  export default Counter;
  

• 코드 설명

• 언제 사용해야 하는가:

  • 컴포넌트 내부에서 동적으로 변경되는 값을 관리할 때 사용합니다. (예: 입력값, 카운터, 토글 등)

3.2.2 useEffect

• 용도:
  • 컴포넌트가 렌더링된 후에 부수 효과(예: 데이터 페칭, DOM 업데이트, 구독 설정 등)를 처리하기 위해 사용합니다.
• 동작 원리:
  • 첫 번째 렌더링 이후 또는 의존성 배열(dependency array)의 값이 변경될 때 지정한 함수를 실행합니다.
  • 클린업 함수를 반환하여 컴포넌트가 언마운트될 때 정리 작업을 수행할 수 있습니다.