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

ww8007·2021년 8월 11일
1

React Hook

목록 보기
1/2
post-thumbnail

최적화 관련 HOOKS

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

최적화는 왜 필요한데? 🤔

  • 최적화를 생각한다면 정보를 캐싱해서 사용하는 것을 일반적으로 생각할 수 있다.
  • React 에서는 특히 페이지 새로고침(reRender) 에 대해서 최적화에 대해 예민하게 생각해야 하는 것이 사실
  • 물론 간단한 페이지의 경우 이를 신경쓰지 않아도 문제가 없는 경우가 많다.
    • 그래도 공부를 하려면 제대로 해야 한다는 생각이 큰 건 사실이다.
  • 간단하게 예를 들어보자
export default frunction App() {
    const title = D.makeArr(2000); // -1-
    return (
        <div>{title}</div>
    )
}

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에 대해서 정리!


참고 서적

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


profile
Frontend 개발자를 꿈꾸는 대학생 입니다.

0개의 댓글