# 작업 일지 21 / code splitting with named export components

성능 최적화를 위해 코드 스플리팅을 적용하려고 한다. React 에서는 Suspense 와 Lazy import를 지원하기 때문에, 별도 모듈로 분리했던 Router 에 적용해보자. 

 

https://reactjs.org/docs/code-splitting.html#named-exports 이 링크를 보면 React.lazy의 경우 export defaul 만을 지원한다고 한다. 별도의 처리를 해주어야 하는데, 여기서는 아래와 같은 방법을 추천하고 있다.

이렇게 변경할 경우 모든 컴포넌트에 대해서 이런 처리를 해주어야 하는데.. 다른 방법은 없을까?

https://github.com/facebook/react/issues/14603#issuecomment-726551598 이 글에 나온 코드를 적용하여 해결할 수 있었다. (천재 짝짝짝)

 

문득 궁금한게, Suspense 를 적용했을 때 실시간 데이터 스트리밍에는 문제가 없는지 궁금해졌는데, 이 링크(https://github.com/facebook/react/issues/17436) 와 같이 궁금해하는 사람이 있었다. 스트리밍 데이터 자체에 따른 처리는 별도로 지원되는 것은 없는 것 같다. 불분명 하다고 되어있는데 일단 웹소켓에 대해서 동작은 제대로 하는 것 같다.

 

---

react-query 에서 useMutation 훅은 isLoading 상태를 다른 컴포넌트와 공유할 수 없다. https://github.com/TanStack/query/issues/2304 이 글을 보면 해당 내용이 자세히 나와있다. handleDelete 라는 mutate 함수와 로딩 상태를 커스텀 훅으로 분리한 뒤에 여러개의 다른 컴포넌트에서 사용하려고 했는데, 늘 false여서 찾아보게 되었다. 해당 글에 나와있는 v5에 useMutationState를 현재 사용중인 버전이 낮아서 쓸 수 없다.