[모던 리액트 딥다이브] 3.2장 사용자 정의 훅과 고차 컴포넌트

 

사용자 정의 훅

• 서로 다른 컴포넌트 내부에서 같은 로직을 공유하고자 할 때 주로 사용
• 리액트 훅을 기반으로 개발자가 필요한 훅을 만드는 기법
• 반드시 use로 시작하는 함수명이여야 함

import { useEffect, useState } from "react";

function useFetch<T>(
    url: string,
    { method, body } : { method: string; body?: XMLHttpRequestBodyInit },
) {
    const [result, setResult] = useState<T | undefined>()
    const [isLoading, setIsLoding] = useState<boolean>(false)
    const [ok, setOk] = useState<boolean | undefined>()
    const [status, setStatue] = useState<number | undefined>()

    useEffect(() => {
        const abortController = new AbortController()

        ;(async () => {
            setIsLoding(true)

            const response = await fetch(url, {
                method,
                body,
                signal: abortController.signal,
            })

            setOk(response.ok)
            setStatue(response.status)

            if(response.ok) {
                const apiResult = await response.json()
                setResult(apiResult)
            }

            setIsLoding(false)
        })()

        return () => {
            abortController.abort()
        }
    }, [url, method, body])

    return {ok, result, isLoading, status}

}

 

 

 

고차 컴포넌트(HOC, Higher Order Component)

• 컴포넌트 자체의 로직을 재사용하기 위한 방법
• 고차 함수의 일종, 리액트가 아니더라도 자바스크립트 환겨에서 널리 쓰임
• React.memo가 있음

 

React.memo

• props의 변화가 없음에도 컴포넌트의 렌더링을 방지하기 위해 만들어진 리액트의 고차 컴포넌트
• 렌더링하기에 앞서 props를 비교해 이전과 props가 같다면 렌더링 자체를 생략하고 이전에 기억해 둔 컴포넌트를 반환함

 

고차 함수

• 함수를 인수로 받거나 결과로 반환하는 함수
• map, forEach, reduce 등

function add(a) {
    return function (b) {
        return a + b
    }
}

const result = add(1) // result는 앞서 반환한 함수를 가리킴
const result2 = result(2) // 비로소 a + b 한 값인 3이 반환됨

 

 

고차 함수를 활용한 리액트 고차 컴포넌트 만들기

• 사용자 인증 정보에 따라 인증된 사용자에게는 개인화된 컴포넌트를, 그렇지 않은 사용자에게는 별도로 정의된 공통 컴포넌트를 보여주는 시나리오

import { ComponentType } from "react";

interface LoginProps {
  loginRequired?: boolean;
}

function withLoginComponent<T>(Component: ComponentType<T>) {
  return function (props: T & LoginProps) {
    const { loginRequired, ...restProps } = props;

    if (loginRequired) {
      return <>로그인이 필요합니다. </>;
    }
    return <Component {...(restProps as T)} />;
  };
}

const Component = withLoginComponent((props: { value: string }) => {
  return <h3>{props.value}</h3>;
});

export default function App() {
  const isLogin = true;
  return <Component value="text" loginRequired={isLogin} />;
}

• Component를 withLoginComponent라 불리는 고차 컴포넌트로 감싸둠
• withLoginComponent는 함수(함수 컴포넌트)를 인수로 받으며, 컴포넌트를 반환하는 고차 컴포넌트
• 사용자 정의 훅처럼 단순히 값을 반환하거나 부수 효과를 실행하는것과 다르게, 고차 컴포넌트는 컴포넌트의 결과물에 영향을 미칠 수 있는 다른 공통된 작업 처리 가능
• 단, 고차 컴포넌트를 사용할 때 부수 효과를 최소화해야 하고, 여러 개의 고차 컴포넌트로 컴포넌트를 감쌀 경우 복잡성이 커질 수 있음을 주의해야 함

 

 

사용자 훅과 고차 컴포넌트

• 사용자 정의 훅 사용
  • 단순히 useEffect, useState와 같이 리액트에서 제공하는 훅으로만 공통 로직을 격리할 수 있다면 사용자 정의 훅을 만드는 것이 좋음
  • 사용자 정의 훅 자체는 렌더링에 영향을 미치지 못하기 때문에 컴포넌트 내부에 미치는 영향을 최소화해 개발자가 훅을 원하는 방향으로만 사용할 수 있음
  • 부수 효과가 비교적 제한적임
  • 컴포넌트 전반에 걸쳐 동일한 로직으로 값을 제공하거나 특정한 훅의 작동을 취하게 하고 싶다면 사용자 정의 훅을 사용하는 것이 좋음
• 고차 컴포넌트 사용
  • 에러 바운더리 컴포넌트 같이 중복 처리가 애플리케이션 전반에 걸쳐 나타나는 경우 고차 컴포넌트를 사용하는 것이 좋음
  • 함수 컴포넌트의 반환값, 즉 렌더링의 결과물에도 영향을 미치는 공통 로직이라면 고차 컴포넌트를 사용하는 것이 좋음