[React] 최적화 관련 Hook에 대해서 알아보자(1)

최적화 관련 HOOKS

• React를 공부하보면 가장 궁금하고 신기하다고 느끼던게 Hook 이였다.
• 공부를 하면서 배웠던 점들을 정리 해보려고 한다.

최적화는 왜 필요한데? 🤔

• 최적화를 생각한다면 정보를 캐싱해서 사용하는 것을 일반적으로 생각할 수 있다.
• React 에서는 특히 페이지 새로고침(reRender) 에 대해서 최적화에 대해 예민하게 생각해야 하는 것이 사실
• 물론 간단한 페이지의 경우 이를 신경쓰지 않아도 문제가 없는 경우가 많다.
  • 그래도 공부를 하려면 제대로 해야 한다는 생각이 큰 건 사실이다.
• 간단하게 예를 들어보자

title의 경우 렌더링 시 계속 새로 생성이 된다는 점이 문제가 되는 점
- → 이는 App이 함수(fucntion) 형태이고
- → title의 값이 지역 변수(local variable) 형태이기 때문

• 이런 컴포넌트가 하나라면 괜찮겠지만 여러개고 예제 처럼 2000개를 reRender 할 때 마다 생성 한다면?
  • → 결코 넘어갈 수 없는 문제이다.

그래서 등장한 React Hook 😃

• 리액트 훅의 탄생 배경은 지역 변수인 title을 마치 전역 변수처럼 사용하고 싶기 때문
  • → 리액트 팀은 로컬 변수인 title이 실제 데이터를 가지지 않고
  • 실제 데이터 : 어딘가 캐시
  • 로컬 변수 title : 필요할 때 캐시한 데이터를 찾을 수 있는 일종의 키 저장
  • → 이를 참조(reference)라고 함
• 해시 맵(hash map) 형태로 표현하지면 이렇다.

• const 컴포넌트_캐시 = {
  	키1: 값1,-----------------------> useState
  	키2: 값2,-----------------------> useMemo
  	키3: 값3,-----------------------> useCallback
  };

cache 개념을 이용한 함수 만들어서 사용하기

const cache: Record<string, any> = {}; // -1-

export const createOrUse = <T>(key: string, callback: () => T) => {
    // -2-
    if (!cache[key]) {
        // -2-
        cache[key] = callback();
    }
    return cache[key];
};

1. cache 라는 이름의 전역 변수 존재
   • → 변수의 타입은 Record<string, any>
   • Ts 에서 기본 제공하는 타입
   • → 2번의 형태 코드를 컴파일 오류 없이 실행하게 해줌
   • → Record 는 Record<키_타입, 값_타입> 형태로 사용 하는 제네릭 타입(generic type)

• cache
  • → 키 타입 : string(문자열)
  • → 값 타입 : any(색인 타입(index type))

위 코드는 cache[key] 존재 → 그 값을 반환
없으면 callback 호출 → cache[key]에 저장하고 반환

• 캐시를 구현하는 전형적인 방법
• 리액트 훅의 뛰어난 점은 people 같은 키 부분을 사용자 코드에서 관리 하지 않고
  • → 리액트 프레임워크 내부에서 관리하여 호출 부분을 매우 간결하게 해줌

의존성에 대해서 알아보기

• React 프레임워크 내부에서 관리하는 캐시는 어떤 상황이 일어나면 갱신해야 할 경우가 생김
  • → React Hook 에서는 이것을 의존성(dependency) 이라고 한다
  • 캐시한 값을 갱신하는 의존성은 여러개일 수 있음
• 리액트 훅에서 이와 같은 여러 개의 의존성을 배열 형태로 모아 놓은 것을 의존성 목록
  • → 의존성 목록 중 어느 것 하나라도 조건이 충족하면
  • 캐시를 자동 갱신하고 해당 컴포넌트를 reRender 하게 됨

다음 포스트에서는 useMemo에 대해서 정리!

참고 서적

[리액트 네이티브 앱프로그래밍]-(전예홍)