[리액트] 기초 개념 Hook 직접 만들기

9. 훅 직접 만들기
1) 커스텀 훅

• 리액트가 제공하는 훅을 이용해서 커스텀 훅을 만들 수 있다.
• 로직 재사용이 가장 큰 장점.
• 커스텀 훅 만들 때는 훅 이름은 use로 시작하는 것이 좋다.
• 훅은 일반적인 함수로 작성할 수 있다.
• 레고 블록처럼 기존 훅을 이용해서 새로운 훅을 만들 수 있다.

2) 예시

• userId를 입력하면 user객체를 가져올 수 있는 커스텀 훅
• useUser를 사용하는 쪽에서는 userId만 입력해주면 user객체가 나오니까 굉장히 편리하고 직관적이다.
• userId가 변경되면 훅 내부에서 자동으로 api를 호출해서 사용자 정보를 가져올거고, useUser 훅 내부 상태값이 변경되면 자동으로 이 컴포넌트도 같이 새로운 유저와 함께 렌더링이 될 것이다.
• user 데이터를 가져오는 것은 비동기이지만 마치 userId를 넣으면 user가 바로 나오는 것 처럼 (마치 동기 프로그래밍 방식 처럼) 간편하게 작성을 할 수가 있다.

3) 예시 / useMounted 훅 만들기

• 보통 서버사이드 렌더링을 할 때 많이 쓰는 정보인데 마운트 됐는지 안됐는지에 대한 정보를 알기 위한 훅을 만들면 좋다.
• 상태값 변경 함수는 렌더링이 끝난 다음에 호출되는 것을 이용하는 개념이다.
• 단, 매번 호출될 필요는 없으니까 useEffect에 빈 배열을 넣어주어 초기에 한 번만 실행이 되도록 한다.

export default function useMounted() {
  const [mounted, setMounted] = useState(false);
  
  useEffect(() => {
    setMounted(true);
  }, []);

  return mounted;
}

4) 기타 커스텀 훅 예시

• 로그인된 사용자만 접근할 수 있는 페이지다 라고 할 때, 커스텀 훅을 만들어놓고 로그인된 사용자가 아닐 경우에는 얼럿을 띄워 준다던가 아니면 자동으로 로그인 페이지 같은데로 보내줄 수 있다. (useBlockIfNotLogin())
• 어떤 페이지에서 사용자가 작성한 내용이 있을 때, 저장되지 않고 페이지를 벗어나려고할 때 확인 팝업 띄울 때도 커스텀 훅을 만들어서 관리하면 좋을듯. (useBlockUnsavedChange(description))
• useEffect를 실행을 하는데 로그인 유저인 경우에만 실행을 하고 싶을 때 (사용법은 useEffect와 같은데 콜백을 호출하는 시점이 로그인 유저인 경우에만 호출을 해준다)(useEffectIfLoginUser(callback, deps))
• 로컬 스토리지 사용 커스텀 훅 (useLocalStorage(key, initalValue) ⇒ [value, setValue])

참고
https://jess2.xyz/react/react-tip-0/#2-create-react-app-cra-%EC%9C%BC%EB%A1%9C-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0