# React.lazy
React.lazy와 @loadbale/component의 차이점
리액트로 진행한 프로젝트을 라이트하우스로 돌려봤고 그 중 나온 권장 사항이 사용하지않는 자바스크립트 줄이기였다. 해당 글에서는 위의 이미지와 같이 리액트에서는 code-split을 추천했고 React.lazy()를 사용하기로 했다. 기존 코드 수정된 코드 이렇게 코드를 수정했다. React.lazy()를 사용한다면 ``도 필수적으로 사용해야한다. 이때 fullback안의 요소가, 비동기 작업이 자식 컴포넌트에서 처리되기 전에 보이게 된다. 이를 사용하여 번들의
08.23 React.lazy, Suspense
Lazy 사용이유 큰 React 어플리캐이션은 많은 구성 요소, 유틸리티 및 라이브러리로 구성이 되어있다. 만약, 필요할 때만 다른 부분을 로드하려고 노력하지 않으면 사용자가 첫 페이지를 로드할 시 Javascript 번들이 사용자에게 전송이 되는데, 이는 페이지 성능에 상당한 영향을 줄 수 있다. 이 때 React.lazy 함수는 개별 javascript를 청크로 분리하는 기본 방법을 제공한다. Suspense 사용이유 사용자에게 큰 javascript 페이로드를 전송할 때 특히 저사양 장치와 저속 네트워크 연결에서는 페이지 로드를 완료하는데 시간이 걸린다. 이때 코드 분할 및 지연 로딩이 매우 유용하다. 그러나 네트워크를 통해 코드 분할 구성 요소를 가져올 때 사용자가 경험해야 하는 약간의 지연이 항상 있어서 로두 상태를 표시하는 것이 중요한데, 이때 Suspense와 React.lazy를 사용하면 이 문제를 해결하는 데 도움이 된다. Suspens
[React] 성능 향상을 위한 코드 분할하기(React.lazy, Suspense)
현재 진행하고 있는 프로젝트의 규모가 커지면서, 애플리케이션의 모든 컴포넌트를 한 번에 로드하는 방식으로 인해 성능 저하 문제가 발생하고 있을 수도 있다는 생각에 Lighthouse 도구를 통해 검사한 결과, 아래와 같이 사용되지 않는 로고와 함께 당장 보여줘도 되지 않는 컴포넌트들을 같이 불러오는 문제를 확인할 수 있었습니다. 위의 문제를 해결하기 위해 찾아본 결과 코드분할 방식을 사용하면 손쉽게 문제를 해결할 수 있었습니다. 코드분할(Code Splitting) 이란? 코드분할은 애플리케이션의 코드를 여러 번에 나누어 로
React 코드 스플리팅
code spliting 리액트 앱의 코드를 여러 개의 번들로 나누는 기술. 코드 스플리팅 자체는 리액트만의 기술이 아니며, 모듈 번들러를 활용하여 다른 SPA 라이브러리에서도 사용이 가능한 기술이다. SPA의 경우, 빌드를 통해 모든 코드를 파일하나로 합추는 작업이 진행되는데, 코드가 많아질수록 소스 코드에 대한 컴파일링 시간은 증가하게 되고, 그만큼 초기 렌더링이 늦어지는 단점을 가지게 된다. 이를 개선하고자 코드에서 당장 사용한 부분을 먼저 파싱하여 렌더링한 후, 이후에 필요한 코드 부분은 따로 이후에 파싱하도록 분리하도록 하는 것이 코드 스플리팅의 특징이라 할 수 있다. 코드 스플리팅을 하는 경우, main.js 외에 숫자로 시작하는 다른 js 파일들이 생성하는 것을 볼 수 있다. 숫자로 쓰인 부분은 실제 필요한 경우에만 해당하여 불러와 사용하게 된다. 
(SEB_FE) Section4 Unit3 React의 주목해야 할 기능
코드 분할(code spliting)에 대해 학습합니다. React는 어떻게 코드 분할을 하는지 학습합니다. React.lazy() 메서드의 쓰임새와 작성 방법에 대해 학습합니다. suspense의 쓰임새와 작성 방법에 대해 학습합니다. React.lazy()와 Suspense 기능을 알기 전에 코드 분할(code spliting)에 대해 먼저 알아보자. 💜코드 분할 (Code Spliting) 대부분 React 앱들은 Webpack, Rollup과 같은 툴을 사용해 번들링(Bundling)한다. 이렇게 하면 HTML 웹 페이지에 JavaScript를 쉽게 추가할 수 있기 때문! 번들된 앱은 모든 JavaScript가 한 곳에 있기 때문에 페이지를 설정하는 데 필요한 호출 수가 적은 링크 태그 하나만 필요하게 된다. 모던 웹 이전의 웹 JavaScript 코드는 최소한의 수준으로 작성되었기 때문에 이렇게 해도 무리가 없었다. 하지만 모던 웹으로 발전
[React] React.lazy 소개
React.lazy React.lazy 함수를 사용하면 동적 import를 사용해서 컴포넌트를 렌더링 할 수 있습니다. React.lazy 는 동적 import() 를 호출하는 함수를 인자로 가집니다. 이 함수는 React 컴포넌트를 default export로 가진 모듈 객체가 이행되는 Promise를 반환해야 합니다. lazy 컴포넌트는 Suspense 컴포넌트 하위에서 렌더링되어야 하며, Suspense는 lazy 컴포넌트가 로딩되길 기다리는 동안 로딩 화면과 같은 예비 컨텐츠를 보여줄 수 있게 해줍니다. fallback prop은 컴포넌트가 로드될 때까지 기다리는 동안 렌더링하려는 React 엘리먼트를 받아들입니다. Suspense 컴포넌트는 lazy 컴포넌트를 감쌉니다. 하나의 Suspense 컴포넌트로 여러 lazy 컴포넌트를 감쌀 수도 있습니다.
React 비동기 처리와 성능 향상(feat. lazy, Suspense, ErrorBoundary)
BilliG 프로젝트에서 API 통신으로 데이터를 fetching 할 때, 리액트 쿼리의 useQuery를 통해 isLoading, isError를 받아와 컴포넌트 내에서 비동기 처리 로직을 작성했었다. 이렇게 작성한 코드가 올바른 방법인지에 대해 코치님들께 질문을 하였고 Suspense를 통해 고급스럽게 처리할 수 있다는 피드백을 받았다. 때문에 리팩토링 기간 중 React.lazy, Suspense, ErrorBoundary를 이용해서 API 비동기 처리, 에러 처리 로직을 컴포넌트에서 삭제하고 관심사 분리를 할 수 있었다. 이에 대한 기록을 남기고자 한다. React.lazy 컴포넌트를 dynamic import를 통해 동적으로 불러오기 위해서는 React.lazy()를 사용해야 한다. 컴포넌트를 동적으로 불러온다는 것은 컴포넌트를 필요한 순간에 불러와서 사용함을 의미한다. 일반적인 import를 사용할 경우 사용자가 첫 페이지를 로드할 때, 페이지에서 사용되지 않는 컴
React.lazy()에 관하여...
react.lazy란 >동적 import를 통해 컴포넌트를 손쉽게 javascript 청크로 분리 할 수 있도록 해주는 메서드 React 에서의 Javascript 청크 분리의 필요성 >React는 기본적으로 첫 페이지를 로드할 때 어플리케이션 전체의 코드를 하나의 JS 번들로 넘겨주게 된다. 이 때문에 대규모 프로젝트에서는 첫 로드시 매우 큰 규모의 JS 번들을 사용자에게 전송하는데, 이는 페이지 성능에 큰 악영향을 끼칠 수 있기 때문이다. lazy 기본 사용법 이처럼 기존 import 하는 방식과 다르게 lazy메서드 내에 import 해주는 함수를 등록하여 컴포넌트를 불러올 수 있다. 이러한 과정을 통해 react는 초기 페이지를 로드 할 때에는 필요한 부분만 번들링을 하게 되고, 사용자의 필요에 따라서 추가적으로 필요한 컴포넌트들을 불러 올 수 있다. 하지만 이 경우, 그때 그때 필요한 JS 번들을 받아온다는 점에서 사용자에게 약간의 지연이 생
React 심화2 Custom Hooks React.lazy()
Custom Hooks 여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 커스텀 훅을 주로 사용합니다 Custom Hook 규칙 Custom Hook을 정의할 때는 함수 이름 앞에 use를 붙이는 것이 규칙입니다. 대개의 경우 프로젝트 내의 hooks 디렉토리에 Custom Hook을 위치 시킵니다. Custom Hook으로 만들 때 함수는 조건부 함수가 아니어야 합니다. 즉 return 하는 값은 조건부여서는 안 됩니다. 이렇게 만들어진 Custom Hook은 Hook 내부에 useState와 같은 React 내장 Hook을 사용하여 작성할 수 있습니다 Custom Hook을 한번에 이해할 수 있는 유튜브 링크를 첨부한다. https://www.youtube.com/watch?v=B70lI2PvRnA&ab_channel=%EC%BD%94%EB%94%A9%EC%95%99%E
React.lazy()와 React.Suspense
React.lazy() React.lazy 함수를 사용해 컴포넌트를 동적으로 import(dynamic import)할 수 있다. 이를 사용해 초기 렌더링 지연시간을 어느정도 줄일 수 있다. React.lazy로 감싼 컴포넌트는 단독으로 쓰일 수는 없고, React.suspense 컴포넌트의 하위에서 렌더링을 해야 한다. > React.lazy로 dynamic import를 감싼다. React.Suspense 아직 렌더링이 준비되지 않은 컴포넌트가 있을 때 로딩 화면을 보여주고, 로딩이 완료되면 렌더링이 준비된 컴포넌트를 보여주는 기능 React.lazy를 사용해 동적으로 import 해오는 컴포넌트들을 ``컴포넌트로 감싸준다. (부모 요소가 되는 것) Suspense의 fallback 속성은 로딩 화면으로 보여줄 리액트 요소를 값으로 둔다. *
코드 분할 (Code Splitting)
번들링 : 웹 애플리케이션 동작에 필요한 HTML, CSS, JavaScript 등의 파일들을 묶어서 제공하는 것 대부분의 React 앱들은 Webpack이나 Rollup과 같은 툴을 사용해 앱을 번들링(Bundling)한다. 하지만 모던 웹으로 발전하면서 JavaScript의 코드 양이 많아지고 무거워지면서, 점차 페이지를 로드하는 시간이 길어지게 되었다. ➡️ 이렇게 번들이 거대해지는 것을 방지하기 위해 번들을 물리적으로 나누자는 아이디어가 등장했다. 코드 분할 (Code Splitting) : 런타임에서 여러 번들을 동적으로 만들고 불러오는 것으로 Webpack, Rollup과 같은 번들러가 지원하는 기능 코드 분할을 하게 되면 지금 당장 필요한 코드만 불러와서 사용할 수 있으며, 이를 통해 페이지 로딩 속도를 개선할 수 있다. 
Dynamic Import
React.lazy React.lazy 사용하는 이유 React.lazy 함수를 사용하면 dynamic import를 사용해 컴포넌트를 렌더링 할 수 있습니다. React는 SPA(Single-Page-Applicaion)이므로 한 번에 사용하지 않는 컴포넌트까지 불러오는 단점이 있기 때문에 React.lazy를 통해 컴포넌트를 동적으로 import 하게되면 초기 렌더링 지연시간을 어느정도 줄일 수 있다. 이 React.lazy로 감싼 컴포넌트는 단독으로는 쓸 수 없고, React.suspense 컴포넌트 하위에서 렌더링 해야한다. Rect.Suspense React.Suspense 기능 Router로 분기가 나누어진 컴포넌트들을 위 코드처럼 lazy를 통해 import하면 해당 path로 이동할 때 컴포넌트를 불러오게 되는데 이 과정에서 로딩하는 시간이 생긴다. > Suspense는 아직 렌더링이 준비되지 않은 컴포넌트
React Code Splitting
코드 분할 대부분 React 앱들은 Webpack, Rollup 또는 Browserify 같은 툴을 사용하여 여러 파일을 하나로 병합한 번들 된 파일(bundle.js) 을 웹 페이지에 포함하여 한 번에 전체 앱을 로드한다. 때문에 프로젝트 규모가 커지면 bundle.js도 커져 되어 로드 시간이 길어지게 된다. 이때, 번들이 거대해지는 것을 방지하기 위한 방법은 번들을 나누는 것이다. 코드 분할은 런타임에 여러 번들을 동적으로 만들고 불러오는 것으로 Webpack, Rollup과 Browserify (factor-bundle) 같은 번들러가 지원하는 기능입니다. import() 앱에 코드 분할(함수 분할)을 도입하는 가장 좋은 방법은 동적 `import
[개발자되기: React 심화2] Day-52
Custom Hooks Custom Hook 정의 시 지켜야 할 규칙 함수 이름 앞에 use 붙이기 프로젝트 내 hooks 디렉토리에 Custom Hook 위치시키기 return 하는 값은 조건부이면 안됨 React에서 주목해야할 기능 React 18 버전에서는 더이상 ReactDOM.render를 지원하지 않음 REACT 18 이전의 index.js 바뀐 index.js React 18에서는 이제 createRoot API를 사용함 Code Spliting 코드 분할 💡 어느 페이지에서 코드를 해석/실행 했을 때 느려지는지 파악해서 번들을 나눈 뒤에 지금 필요한 코드만 불러오고 나중에 필요한 코드는 나중에 불러오면 어떨까? 코드 분할의 핵심: 번들이 거대해지는 것을 방지하기 위해 번들을 물리적으로 나누기 번들 분할/ 번들 줄이기 npm을 통해 다운받는 3rd party 라이브러리는 다양한 메소드를 제공하
React와 코드 스플리팅
본 문서는 김민준 님의 저서인 '리액트를 다루는 기술'를 참고하였습니다 🎭 [코드 스플리팅] 리액트 프로젝트를 사용자에게 제공할 때는 빌드 작업을 거쳐서 배포를 함 빌드 작업 시 동작에 불필요한 주석, 공백 등을 제거하여 크기를 최소화 브라우저에서 JSX 문법이나 다른 최신 자바스크립트 문법이 원활하게 실행되도록 코드의 트랜스 파일 진행 이러한 빌드 작업은 웹팩 이라는 도구가 담당함 별도의 설정을 하지 않으면 프로젝트의 모든 자바스크립트 파일이 하나로 합쳐짐 즉, 사용자는 초기 로딩을 위해 모든 구성요소 자바스크립트를 가져오기 때문에 쓰지 않는 기능들로 인해 로딩이 길어짐 CRA로 프로젝트를 빌드할 경우 최소 두 개 이상의 자바스크립티 파일이 생성됨 CRA
Code-Splitting
Bundling 대부분의 리액트 어플리케이션은 webpack등의 도구를 이용해 번들링을 진행합니다. 번들링이란 어플리케이션 파일 사이의 의존성을 추적하고 합치며 하나의 "번들"이라고 불리는 파일로 만드는 과정을 말합니다. 번들은 웹페이지에 포함되어 전체 어플리케이션을 한번에 로드할 수 있도록 도와줍니다. 필요한 파일을 여러번 요청하지 않고 한번에 요청해서 사용할 수 있는 것이죠. 서버에 요청을 보내고 응답을 받는 일은 비용이 많이 드는 작업입니다. 네트워크의 상태에 따라 에러가 일어날 가능성도 존재하죠. 번들링은 이러한 파일들을 묶어 하나의 파일로 만들어주기에 효율적으로 어플리케이션을 로드할 수 있습니다. > Example App: Bundle: 물론 실제 번들 파일의 모습은 이런 모
react 코드 스플리팅
프로젝트의 규모가 커질수록 파일 용량이 커지기 때문에 그로인한 사용자에게 느린환경을 경험하게 할수 있다. 이럴때 코드 스플리팅을 사용하여 첫 렌더링시 당장 필요한 코드가 아니라면 나중에 불러오게 하여 로딩속도를 개선할 수 있다. react-router에서 적용해보기 1. 기본 라우터 문법 2. React.lazy 적용 import방식을 lazy에 감싸서 필요할때 import할수있게 하였다 3. loading중 표시하기 Suspense의 fallback을 활용하여 불러오는 로딩사이에 "로딩중..."을 표시할 수 있다.