🎈1주차 PR(05/31~06/04)
- 폴더구조에 대한 고민:
앱의 구조를 쉽게 파악하면서도, 필요한 파일을 어렵지 않게 찾을 수 있도록...!
- 공부용어:
code spliting, suspense, React.Lazy
- 코드 스플릿이 필요한 이유
: 웹팩의 번들파일은 전체 자바스크립트 파일을 해석하고 변환해준다. 하지만 이 자바스크립트 파일의 양이 많아지게 된다면 파일을 로드해오는데에 많은 시간이 걸릴 것이다. 때문에 필요한 시점에 필요한 파일들만 불러와 사용할 수 있도록 코드를 분할하게 된다. 코드 분할은 코드의 양을 줄이지 않고도 획기적으로 성능을 향상시켜 앱의 초기화 로딩 시간을 단축시킨다.
- 동적 import()문법
:컴포넌트를 미리 불러오는게 아니고, 사용할 시점에! 불러오게 된다.
import('./issues').then(issue=>console.log(issue.date))
사용 예시는 위와 같은데, 바로 import해오면 promise를 반환하게 된다.
- React.lazy
:lazy는 동적 import()를 호출하는 함수를 인자로 가질 수 있게 한다. 컴포넌트에 해당되고 렌더링은 Suspense 컴포넌트 하위에서 렌더링되어야 한다. suspense는 fallback={예비컨텐츠}의 형태로 lazy컴포넌트의 로드를 기다리는 동안 설정한 로딩화면과 같은 예비 컨텐츠를 보여준다.
- Error boundaries
:suspense가 로딩시간동안 예비컨텐츠를 보여주도록 한다면, 이 error boundaries는 에러처리를 한다. 에러가 발생했을 시 복구관리, 사용자경험 관리가 가능하다. suspense 및 lazy컴포넌트 전체를 감싼다.
- Route-based code splitting :
라우터 화면에 적용할 것, 라우터가 설정되어있는 entry파일의 router들을 suspense로 감싸주자. 화면이 전환되는 동안 로딩표시를 나타낼 수 있다. 라우터에 등록한 컴포넌트들은 당연 lazy로 감싸주어야 함!
- 느낀 바:
- 객체형 데이터를 쓰니 관리할 recoil atom 상태가 줄었다.
데이터 구조를 생각하며 짤 것~~ - 컴포넌트들을 잘게 나누자~_~!!
단순히 코드를 깔끔하게 보여주기 위함이 아닌 최적화를 생각하며 코드스플릿팅.
