React Hooks는 React 16.8 버전부터 도입된 기능으로, 함수형 컴포넌트에서 상태 관리와 생명주기 메서드를 사용할 수 있게 해줍니다. 이번에는 그 중에서도 Custom Hooks에 대해 알아보겠습니다. Custom Hooks는 개발자가 직접 만들어 사용할 수 있는 Hooks로, 컴포넌트 간에 로직을 재사용하기 위해 사용됩니다.

Custom Hooks를 만들기 위해서는 몇 가지 기본 개념을 이해해야 합니다.

1. 매개변수

Custom Hook 함수는 매개변수를 받을 수 있습니다. 이 매개변수는 해당 Hook을 사용하는 컴포넌트로부터 전달되는 값으로 사용됩니다. 매개변수를 이용하면 Hook을 보다 유연하게 만들 수 있습니다.

function useCustomHook(param) {
  // 여기서 param을 사용할 수 있음
}

2. 상태 관리

Custom Hook은 useState나 useReducer와 같은 내장 Hooks를 사용하여 상태를 관리할 수 있습니다. 상태를 관리함으로써 컴포넌트간에 값을 공유하거나 업데이트할 수 있습니다.

import { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  return { count, increment };
}

3. Side Effects

Custom Hook 내부에서는 useEffect와 같은 내장 Hook을 사용하여 Side Effect를 처리할 수 있습니다. Side Effect는 컴포넌트의 렌더링 이후에 실행되는 코드로, API 호출, 데이터 가져오기, DOM 조작 등의 작업을 처리하는 데 사용됩니다.

import { useEffect } from 'react';

function useCustomHook() {
  useEffect(() => {
    // Side Effect 처리
    // ...

    return () => {
      // Clean up
      // ...
    };
  }, []);
}

4. 컴포넌트로 반환

Custom Hook은 다른 컴포넌트에서 사용할 수 있도록 값을 반환해야 합니다. 일반적으로 객체나 배열로 값을 반환하며, 그 값들을 사용하여 다른 컴포넌트에서 로직을 구현할 수 있습니다.

function useCustomHook() {
  // ...

  return { count, increment };
}

Custom Hook을 만들고 나면 이를 다른 컴포넌트에서 import하여 사용할 수 있습니다.

import React from 'react';
import useCustomHook from 'path/to/customHook';

function MyComponent() {
  const { count, increment } = useCustomHook();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

마무리

이렇게 자바스크립트 Custom React Hooks의 기본 개념을 알아보았습니다. Custom Hooks를 사용하면 컴포넌트 간의 로직을 재사용할 수 있고, 코드의 중복을 줄일 수 있어 효율적인 개발을 할 수 있습니다.

더 자세한 내용은 React 공식 문서를 참고하시기 바랍니다. #react #customhooks