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

2024. 7. 21. 15:16· FE/리뷰

 

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

 

 

'FE > 리뷰' 카테고리의 다른 글

[모던 리액트 딥다이브] 4.2장 SSR을 위한 리액트 API  (0) 2024.08.03
[모던 리액트 딥다이브] 4.1장 서버 사이드 렌더링  (0) 2024.07.21
[모던 리액트 딥다이브] 3.1장 리액트 훅  (0) 2024.07.13
[모던 리액트 딥다이브] 2.5장 메모이제이션  (0) 2024.07.13
[모던 리액트 딥다이브] 2.4장 렌더링  (0) 2024.07.13
'FE/리뷰' 카테고리의 다른 글
  • [모던 리액트 딥다이브] 4.2장 SSR을 위한 리액트 API
  • [모던 리액트 딥다이브] 4.1장 서버 사이드 렌더링
  • [모던 리액트 딥다이브] 3.1장 리액트 훅
  • [모던 리액트 딥다이브] 2.5장 메모이제이션
따봉치치
따봉치치
따봉치치
김치치의개발블로그
따봉치치
전체
오늘
어제
  • 분류 전체보기 (359)
    • 면접질문 (4)
    • CS (50)
    • FE (116)
      • Javascipt (16)
      • Typescipt (6)
      • React (16)
      • CSS (5)
      • Nextjs (1)
      • 리뷰 (70)
    • Algorithm (181)
    • ETC (3)
      • Bootcamp (4)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • javascript
  • Greedy
  • 완전탐색
  • 백준
  • BOJ
  • react
  • 백트래킹
  • CS
  • 모던 자바스크립트 딥다이브
  • 자바스크립트
  • 모던 리액트 딥다이브
  • dp
  • Fe
  • 알고리즘
  • BFS
  • 탐욕 알고리즘
  • C++
  • 데이터베이스
  • 리액트
  • 그래프 탐색
  • 스택
  • 문자열
  • 우선순위 큐
  • 누적합
  • Stack
  • typescript
  • 그리디
  • 투 포인터
  • TOPCIT
  • 자료구조

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
따봉치치
[모던 리액트 딥다이브] 3.2장 사용자 정의 훅과 고차 컴포넌트
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.