22.07.28_TIL

📌 어제 저녁에 각종 API를 실습을 진행했다. 유튜브, 공공데이터 포털, vworld 등은 proxy 설정없이 API를 받아올 수 있었지만 네이버 검색 API를 가져올 경우 package.json에 proxy 설정을 해야 CORS 오류가 사라지며 데이터를 받아올 수 있었다. 그리고 오늘은 Custom Hooks를 학습하는 날이다. 반복되는 룆ㄱ을 함수로 만들어 재사용할 수 있다라고 적혀있는데 어떤 것인지 정확히 학습을 진행해보자!!

📗 오늘 학습한 내용

Custom Hooks

• 개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있다.
• 여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 커스텀 훅을 주로 사용합니다.
• 상태관리 로직의 재활용 가능
• 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직 구현 가능
• 함수형으로 작성하기 때문에 보다 명료하다.

Custom Hook 정의 규칙

• Custom Hook을 정의할 때는 함수 이름 앞에 use를 붙이는 것이 규칙이다.
• 대개의 경우 프로젝트 내의 hooks 디렉토리에 Custom Hook을 위치 시킨다.
• Custom Hook으로 만들 때 함수는 조건부 함수가 아니어야 한다. return 하는 값은 조건부여서는 안된다.

코드 분할(Code Spliting)

• 코드를 해석하고 실행하는 정도가 느려졌는지 파악해서 번들을 나눈 뒤에 지금 필요한 코드만 불러오고 나중에 필요한 코드는 나중에 불러올 수 있도록하는 개념이다.
• 번들이 거대해지는 것을 방지하기 위한 좋은 해결 방법은 번들을 물리적으로 나누는 것이다.
• 런타임 시 여러 번들을 동적으로 만들고 불러오는 것으로, Webpack, Rollup과 같은 번들러가 지원하는 기능이다.
• 페이지의 로딩 속도를 개선할 수 있다.

번들 분할 줄이는법

• 라이브러리를 전체적으로 불러와서 사용하는 것이 아닌 필요한 메소드만 불러와서 사용하여 공간을 확보할 수 있다.

// lodash 라이브러리 전체 불러오기
import _ from 'lodash';

// lodash 라이브러리에서 메소드 하나를 불러와 사용
import find from 'lodash/find';

React에서의 코드 분할

• SPA에서는 사용하지 않는 모든 컴포넌트까지 한 번에 불러오기 때문에 첫 화면이 렌더링 될때까지의 시간이 오래걸리는 것을 해결하기 위해 코드 분할 개념을 도입했다.

Static Import

• 기존 import 구문은 문서의 상위에 위치해야 하고, 블록문 안에서는 위치할 수 없는 제약 사항이 있었다.

Dynamic Import

• 구문 분석 및 컴파일해야 하는 스크립트의 양을 최소화 시키기 위한 구문입니다.
• 함수 내부에서 Import 문을 사용할 수 있다.
• React.lazy와 함께 사용할 수 있다.

React.lazy()

• dynamic import를 사용해 컴포넌트를 렌더링 할 수 있다.
• 초기 렌더링 지연시간을 어느정도 줄일 수 있다.
• React.lazy로 감싼 컴포넌트는 단독으로 쓰일 수 없고, React.suspense 컴포넌트의 하위에서 렌더링 해야한다.

import Component from './Component';

const Component = React.lazy(() => import('./Component'));

React.Suspense

• Router로 분기가 나누어진 컴포넌트들은 lazy를 통해 import하면 해당 path로 이동할때 컴포넌트를 불러오게 되며 로딩하는 시간이 생기게 된다.
• 아직 렌더링이 준비되지 않은 컴포넌트가 있을 때 로딩화면을 보여주고, 로딩이 완료되면 렌더링이 준비된 컴포넌트를 보여주는 기능이다.

React.lazy와 Suspense의 적용

• 중간에 적용시키는 것보다는 웹 페이지를 불러오고 진입하는 단계인 Route에 이 두 기능을 적용시키는 것이 좋다.

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

Study원과 함께 진행중인 프로젝트 구현

• Authentication

📝 중요한 내용

• Custom Hook
• Custom Hook 생성조건
• 코드분할
• React.lazy
• React.Suspense