[유데미(udemy) - React CleanCode] Hooks

참고) 이전에 사용했던 패턴

HOC (Higher Order Component) : 컴포넌트 로직을 재사용하기 위한 React의 고급 기술 

고차 컴포넌트는 React API 의 일부가 아니며 React의 구성적 특성에서 나오는 패턴 

 

const EnhancedComponent = higherOrderComponent(WrappedComponent);

 

 

useEffect() 기명 함수와 함께 사용하기 

ex) 대략적인 추상화로 useEffect 내에 어떠한 로직이 수행되고 있는지 유추하기 용이함. 

useEffect(function isInViewSomeComponent() {
	if(isInView(someRef.current)) {
     // some logic 
     }
  }, [isInview]);

 

clean up 함수에도 기명함수를 사용할 수 있음. 

 

애러 발생 시 디버깅하기 용이함!

useEffect(function addEvent() { 
	document.addEventListner();
    
    return function removeEvent(){
    	document.removeEventListener();
        };
   }, []);

 

내가 주로 사용하는 방식은 다음과 같다. 

 

useEffect(()=>{
	const handleSomething = () => {
    //logic
    };
    
    handleSomething();
    },[]}

 

 

이전에 회사에서 useEffect 내에서 마운트 될 때 한번만 실행되는 로직에 관해서 즉시 실행함수를 사용하는 것은 어떠냐는 코멘트를 받은 적이 있는데 (바로 실행되는 것을 한눈에 이해할 수 있을 거고 마운트될 때 한번만 실행이 되기 때문에) 이때에도 기명함수를 사용하는 것이 디버깅하는 데에 더 용이할까?

  useLayoutEffect(() => {
    (() => {
      if (mathLiveRef.current && realMathLiveRef.current) {
        const width = (mathLiveRef.current as HTMLElement).offsetWidth + 60;

        (realMathLiveRef.current as HTMLElement).style.minWidth = `${width}px`;
      }
    })();
  }, []);

 

한 가지 역할만 수행하는 useEffect() 

 

useEffect가 한 가지 역할만수행하도록 하는 방법

- 기명 명함수를 사용해보자

- dependency Arrays 너무 많은 관찰 대상이 들어가고 있는 게 아닌지 점검해보기 

 

- useEffect 내부에서 부가적인 로직을 통해 추가 동작해도 이상이 없고 부작용이 생길 일이 없을 경우에만 함께 쓰자

ex) 

useEffect(() => {
	const userInfo = setLogin(token);
    // ...로그인 로직 

	if(options){
    // 부가적인 로직
    }
  }, [token, options]);

 

Custom Hooks 반환의 종류 

- setter, getter를 배열로 return 할 경우에는 왼쪽에 getter를 return 하도록 하자. 

- 하나의 값을 return 때에는 배열 구조 분해 할당을 하기 보다는 값 하나를 return 하자. 

- 다양한 종류의 값을 return 할 때에는 순서에 관여받지 않도록 배열이 아닌 객체 형태로 return 하자. 

 

function ReturnCustomHooks() {
const [value, setValue] = useSomeHooks(true); 

const oneValue = useSomeHooks();

const {firstValue, secondValue,someFunction} = useSomeHooks();

}

 

useEffect() 내부의 비동기 

useEffect 내부에서 비동기 함수 처리는 불가능함.

// x 
useEffect((async() => {
....