1. 훅(Hooks)이란

• 훅(Hook): 리액트 16.8 버전부터 도입된 기능으로 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해줌.
• 주요 훅:

  • useState: 상태 변수를 선언하고 관리. 예시:

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

  • useEffect: 컴포넌트의 부수 효과(side effect)를 수행. 예시:

    useEffect(() => {
      document.title = `You clicked ${count} times`;
    }, [count]);
    
    

  • useContext: 컨텍스트를 구독하여 현재 컨텍스트 값을 가져옴. 예시:

    const value = useContext(MyContext);
    
    

  • 그 외에도 useReducer, useMemo, useCallback, useRef 등 다양한 훅이 있음.

2. 훅 정책(훅을 사용할 수 있는 위치)

• 함수 컴포넌트 최상위 위치에서 호출

  const MyComponent = () => {
    // 올바른 사용
    const [state, setState] = useState(initialState);
  
    // 잘못된 사용(컴포넌트의 최상위 위치 X)
    if (someCondition) {
      useEffect(() => {
      }, []);
    }
    
    // 잘못된 사용(컴포넌트의 최상위 위치 X)
    const MyFunc = () => {
      const [test, setTest] = useState(null);
    }
  }
  
  

• 커스텀훅 최상위 위치에서 호출

  
  const useCustomHook = () => {
    const [state, setState] = useState(initialState);
    return {state};
  }
  

3. 커스텀 훅이란?

• 커스텀 훅(Custom Hook): 여러 컴포넌트 간에 로직을 재사용하기 위해 사용자가 정의하는 훅.
• 형식: 이름이 'use'로 시작하며 하나 이상의 리액트 훅을 호출하는 함수.
• 예시: 데이터를 가져오는 로직, 폼 핸들링 로직 등을 커스텀 훅으로 작성하여 재사용 가능.

4. 커스텀 훅과 JS 모듈의 차이점 및 커스텀 훅을 사용해야 하는 이유

• 차이점:
  • JS 모듈: 상태 및 리액트 생명주기와 무관한 로직을 포함할 수 있음.
  • 커스텀 훅: 리액트의 상태 및 생명주기 로직을 포함할 수 있으며, 다른 훅들을 호출할 수 있음.
• 사용해야 하는 이유:
  • 재사용성: 여러 컴포넌트에서 동일한 로직을 쉽게 재사용 가능.
  • 구조화: 상태와 로직을 컴포넌트에서 분리하여 더 깔끔한 코드 작성.
  • 테스트 용이성: 상태와 로직이 분리되어 테스트하기 쉬움.
  • 상태 보존: 훅을 통해 상태를 보존하면서 로직을 분리할 수 있음.
• 직접 겪어본 커스텀훅과 모듈의 차이점 예시

  1. DB에서 데이터를 불러오는 모듈을 생성했다.(fetch.js)

     const fetch = async () => {
       const returnData = await load();
       
       return returnData;
     }
     

  2. 해당 모듈은 데이터를 불러오는 함수와 불러온 데이터를 반환(return)하는 구조를 가진다.

  3. 이 때, 해당 모듈에서 데이터를 불러오는 함수는 비동기 방식으로 작동한다.

  4. 컴포넌트에서 렌더링 시 데이터가 불러와질 수 있도록 아래와 같이 코드를 작성했다.

     const Component = () =>{
     
       const loadData = fetch.js() // 데이터 로드
       console.log(loadData); // 데이터 콘솔 찍기
       
       return (
         <>
         <>
       )
     }
     

  5. 그런데 콘솔에 찍힌 데이터가 promise 객체이다.

  6. 이는 fetch에서 데이터를 불러오는 load 함수가 비동기함수이기 때문이다.

  7. 이를 해결하기 위해 아래와 같이 코드를 수정하였다.

     const Component = () =>{
       const [myData, setMyData] = useState(null);
       
       // 데이터 로드 후 myData 상태에 반영
       const myFunc = async() => {
         const loadData = await fetch.js();
         setMyData(loadData); 
       }
       
       console.log(myData); // 데이터 콘솔 찍기
       
       return (
         <>
         <>
       )
     }
     

  8. 단지 데이터를 불러오는 모듈을 콘솔찍기 위함인데도 불구하고 컴포넌트 내부 코드가 많이 복잡해졌다.

  9. 가독성 및 재사용성을 위해 커스텀훅으로 변경한다.

     // useFetch 커스텀훅으로 변경
     const useFetch = () => {
       const [loadData, setLoadData] = useState(null);
       
       const fetchFunc = async () => {
         const data = await load();
         setLoadData(data)
       }
       
       return {loadData, fetchFunc };
     }
     

     // 변경된 컴포넌트 내부 코드
     const Component = () =>{
       const {loadData, fetchFunc } = useFetch();
       fetchFunc();
       console.log(loadData);
       
       return (
         <>
         <>
       )
     }
     

  10. 위처럼 커스텀훅을 사용하면 코드가 분리됨으로써 가독성과 재사용성에 도움이 된다.

5. 커스텀 훅 정의 및 사용방법 예시

커스텀 훅 정의

// usePostUser.js
// DB에 유저 정보 저장

const usePostUser = () => {
  const [isError, setIsError] = useState();

  // 커스텀훅 가져다 쓸 때 이벤트 핸들러 등에 등록할 수 있도록 함수를  따로 분리 후 반환
  // 외부에서 아래 함수를 실행 시 isError에 에러 여부가 반영된다.
  const postUser = async (userData) => {
    try {
      await addDoc(collection(db, "users"), userData);
      setIsError(false);
    } catch (e) {
      console.error("오류 발생 - usePostUser.js \\n", e);
      setIsError(true);
    }
  };

  return { postUser, isError };
};

export default usePostUser;

커스텀 훅 사용방법 예시