[React] React Custom Hooks

* 면접에서 받았던 질문인데, 답은 고사하고 질문 자체를 이해 못 할 정도였으니, 알지 못했던 개념이였습니다. 😥

 

 

Custom Hooks

두 개의 자바스크립트 함수에서 같은 로직을 공유하고자 할 때는 또 다른 함수로 분리합니다. 컴포넌트와 Hook 또한 함수이기 때문에 같은 방법을 사용할 수 있습니다 - 이상 공식 자료에 나온 설명인데, 아직 이해하기에는 부족한 설명 같습니다. 반복되는 훅 활용 메소드들을 하나로 줄여줌으로써 더 간결하고 보기 좋은 코드를 만들 수 있는 것이 바로 custom hooks입니다 

 

• 이름은 use로 시작하는 자바스크립트 함수입니다. 
• custom hook은 다른 hook을 호출 할 수 있습니다
• custom hook은 조건부 함수가 아니어야 합니다

 

역시 코드를 보면 이해하기 좋을 거에요 

(#핀다의 코드를 공유합니다. 출처는 아래 핀다 블로그 주소르 더했습니다)

 

usePrevious는 이전 렌더링에서 값을 기억해두어야 하는 경우에 사용할 수 있습니다. 현재 렌더링과 이전 렌더링 값을 비교할 필요가 있을 때 사용합니다. 

import { useEffect, useRef } from "react";

function usePrevious(value){
  const ref = useRef();
 
  useEffect(() => {
   ref.current = value;
  }, [value]);
 
  return ref.current;
 
 }
 
 export default usePrevious;

 

현재 값이 C 이고 이전 값이 B라면 뭔가를 수행해라~ 라는 로직입니다. 이전 상태값을 저정하는 usePrevious 로직이 custom hook 내부로 들어가 컴포넌트는 깔끔한 상태를 유지하고 있습니다 

 

function MyComponent(){
  const [alphabet, set] = useState('A');
  const prevAlphabet = usePrevious(alphabet);
  
  useEffect(() => {
   if(alphabet === 'C' && prevAlphabet === 'B'){
     doSomething();
   } 
  
  },[]
 
 }

 

 

 

사용의 이점

컴포넌트 로직을 뽑아내서 정의한 이후에 간편하게 호출할 수 있다는 것이 custom hooks의 큰 장점입니다. 

코드의 가독성을 높이고 짧고 간결한 코드를 작성할 수 있게 도와줍니다. 

 

 

 

 

 

 

 

학습 참조 자료 

◾ https://ko.reactjs.org/docs/hooks-custom.html

◾ https://medium.com/finda-tech/%ED%95%80%EB%8B%A4%EC%97%90%EC%84%9C-%EC%93%B0%EB%8A%94-react-custom-hooks-1a732ce949a5​