리액트 훅 (React Hooks)

React에서 "훅(Hooks)"은 함수 컴포넌트에서 React의 상태 관리 및 생명주기 기능을 연결할 수 있게 해주는 기능 입니다.

이전에는 이러한 기능들이 클래스 컴포넌트에서만 사용 가능했으나, 훅의 도입으로 함수 컴포넌트에서도 상태 관리와 생명주기 기능을 사용할 수 있게 되었습니다.

✅ 주요 특징

• 상태 관리: useState 훅을 사용하여 함수 컴포넌트 내에서 상태를 관리할 수 있습니다. 이는 클래스 컴포넌트의 this.state와 유사한 기능을 제공합니다.

• 생명주기 메소드 접근: useEffect 훅은 클래스 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount와 유사한 기능을 제공하여 컴포넌트의 생명주기에 따른 작업을 수행할 수 있게 합니다.

• 커스텀 훅: 사용자가 자신만의 훅을 만들어 로직을 재사용할 수 있습니다. 이를 통해 컴포넌트 간에 상태 관련 로직을 쉽게 공유할 수 있습니다.

• 간결한 코드: 클래스 컴포넌트보다 간결하고 읽기 쉬운 코드를 작성할 수 있으며, this 키워드를 사용하지 않아도 됩니다.

✅ React Hooks

• useState: 컴포넌트의 상태를 관리합니다.
• useEffect: 사이드 이펙트(side effects)를 수행합니다. 데이터 가져오기, 구독, 수동으로 DOM을 변경하는 작업 등이 여기에 포함됩니다.
• useContext: 컨텍스트에 저장된 값을 사용할 수 있게 합니다.
• useReducer: 복잡한 컴포넌트의 상태 로직을 관리할 때 사용합니다.
• useCallback: 메모이제이션된 콜백을 반환합니다.
• useMemo: 메모이제이션된 값을 반환합니다.
• useRef: 레퍼런스(refs)를 생성합니다.

✅ 기본 사용 예시

useState

import React, { useState } from 'react';

function Counter() {
  // useState를 사용하여 'count'라는 상태와 이 상태를 업데이트하는 함수 'setCount'를 선언합니다.
  // 초기값은 0입니다.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        카운트 증가
      </button>
    </div>
  );
}

이 코드에서 useState(0)는 count라는 상태 변수를 0으로 초기화합니다.
setCount 함수는 count 상태를 업데이트하는 데 사용됩니다.
버튼을 클릭하면 setCount 함수가 호출되어 count의 값이 1 증가합니다.

이 컴포넌트는 화면에 현재 카운트 값을 표시하고, "카운트 증가" 버튼을 누를 때마다 카운트가 1씩 증가하는 기능을 제공합니다.
useState를 사용함으로써, 함수 컴포넌트에서도 상태를 쉽게 관리할 수 있습니다.

useEffect

import React, { useEffect } from 'react';

function ExampleComponent() {
  // 컴포넌트가 마운트될 때 실행될 코드
  useEffect(() => {
    console.log('컴포넌트가 마운트되었습니다.');

    // 컴포넌트가 언마운트될 때 실행될 정리(clean-up) 함수
    return () => {
      console.log('컴포넌트가 언마운트되었습니다.');
    };
  }, []); // 빈 의존성 배열([])은 이 효과가 컴포넌트의 마운트 및 언마운트 시에만 실행됨을 의미합니다.

  return <div>안녕하세요!</div>;
}

이 코드에서 useEffect는 컴포넌트가 화면에 처음 렌더링될 때("마운트될 때") console.log('컴포넌트가 마운트되었습니다.')를 실행합니다.
또한, useEffect 내에서 반환된 함수는 컴포넌트가 화면에서 제거될 때("언마운트될 때") 실행됩니다. 이 경우, console.log('컴포넌트가 언마운트되었습니다.')가 실행됩니다.

빈 의존성 배열([])은 useEffect 내부의 코드가 컴포넌트의 마운트와 언마운트 시에만 실행되어야 함을 나타냅니다. 의존성 배열에 특정 값을 넣으면, 해당 값이 변경될 때마다 useEffect 내부의 코드가 실행됩니다.

이 예시는 useEffect가 컴포넌트의 생명주기에 따라 코드를 실행할 수 있게 해주며, 특히 리소스 정리 작업에 유용하게 사용될 수 있음을 보여줍니다.