3장 리액트 훅 깊게 살펴보기 (2)

3.2 사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야 할까?

Mar 08, 2024

Contents

3.2 사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야 할까?3.2.1 사용자 정의 훅 3.2.2 고차 컴포넌트 React.memo란??고차 컴포넌트 만들어보기 고차 함수를 활용한 리액트 고차 컴포넌트 만들어보기 3.2.3 사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야 할까?사용자 정의 훅이 필요한 경우 고차 컴포넌트가 필요한 경우

3.2 사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야 할까?

3.2.1 사용자 정의 훅

서로 다른 컴포넌트 내부에서 같은 로직을 공유하고자 할 때 주로 사용되는 것
반드시 네이밍을 할 때 앞에 use를 붙여야 한다.

3.2.2 고차 컴포넌트

컴포넌트 자체의 로직을 재사용하기 위한 방법이고 리액트 뿐만 아니라 자바스크립트 기반 언어 어디서든 사용할 수 있다.
리액트에서 제공하는 고차컴포넌트 중 가장 유명한 것은 React.memo 이다.

React.memo란??

const ChildComponent = memo(({ value }: { value: string }) => {
  useEffect(() => {
    console.log("렌더링!");
  });
  return <>안녕하세요! {value}</>;
});
function ParentComponent() {
  const [state, setState] = useState(1);
  function handleChange(e: ChangeEvent<HTMLInputElement>) {
    setState(Number(e.target.value));
  }
  return (
    <>
      <input type="number" value={state} onChange={handleChange} />
      <ChildComponent value="hello" />
    </>
  );
}

위와 같이 작성하게 되면 부모의 state변경에도 불구하고 Childcomponent의 value가 변경되지 않았기 때문에 리렌더링되지 않는다.

고차 컴포넌트 만들어보기

function add(a) {
 return function (b) {
  return a + b
 }
}
const result = add(1) // 여기서 result는 앞서 반환한 함수를 가리킨다.
const result2 = result(2) // 비로소 a와 b를 더한 3이 반환된다.

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

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

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)} />;
  };
}

// 원래 구현하고자 하는 컴포넌트를 만들고, withLoginComponent로 감싸기만 하면 끝이다.
// 로그인 여부, 로그인이 안 되면 다른 컴포넌트를 렌더링하는 책임은 모두
// 고차 컴포넌트인 withLoginComponent에 맡길 수 있어 매우 편리하다.
const Component = withLoginComponent((props: { value: string }) => {
  return <h3>{props.value}</h3>;
});

export default function App() {
  // 로그인 관련 정보를 가져온다.
  const isLogin = true;
  return <Component value="text" loginRequired={isLogin} />;
  // return <Component value="text" />;
}

리액트의 고차 컴포넌트도 마찬가지로 with로 시작하는 이름을 사용해야 한다.
강제되는 것은 아니지만 다들 그렇게 사용하고 있으니 맞춰서 사용하도록 하자.
고차 컴포넌트를 사용할 때 주의할 점 중 하나는 부수 효과를 최소화해야 한다.
여러 개의 고차 컴포넌트로 컴포넌트를 감쌀 경우 복잡성이 커진다.