React 쇼핑몰(개발자도구, lazy import)

React 개발자 도구와 Redux 개발자 도구는 개발 중인 React를 디버깅하고, state와 컴포넌트 구조를 확인하는 데 도움을 주는 유용한 도구입니다.

 

1. React 개발자 도구

React 개발자 도구는 크롬 웹 스토어에서 설치할 수 있는 확장프로그램입니다.

설치 후, 크롬 개발자 도구의 Components탭에서 React의 컴포넌트 구조를 살펴볼 수 있습니다.

이를 통해 컴포넌트 구조를 시각적으로 확인할 수 있고, 컴포넌트의 props와 state를 쉽게 확인할 수 있습니다.

또한 컴포넌트를 선택하면 해당 컴포넌트의 props과 state를 수정해 볼 수도 있습니다.

 

2. Redux 개발자 도구

Redux 개발자 도구도 크롬 웹 스토어에서 설치할 수 있는 확장프로그램으로, Redux를 사용하여 state를 관리할 때 유용한 도구입니다.

설치 후, 크롬 개발자 도구의 Redux 탭에서 Redux store에 있는 state를 확인할 수 있습니다. 또한 액션이 발생할 때마다 state 변화를 로그로 확인할 수 있습니다.

Redux 개발자 도구를 사용하면 Redux store의 state를 쉽게 확인하고, 각 액션(dispatch)이 state에 어떻 변화를 일으키는 지 확인할 수 있습니다.

 

3. lazy import

React 앱은 JS, CSS, 이미지 등 여러 요소로 구성되어 있고, 이런 요소들이 묶여서 배포되는데, 이로 인해 번들 크기가 커지면 다운로드 시간이 오래 걸리고 초기 로딩 속도가 저하될 수 있습니다.

이를 해결하기 위해 lazy import를 사용하여 필요한 컴포넌트를 처음에 로드하지 않고, 실제로 필요한 시점에 로드하도록 할 수 있습니다.

lazy import를 사용하기 위해서는 lazy와 Suspense 컴포넌트를 함께 사용해야 합니다. lazy 함수를 사용하여 컴포넌트 지연 로딩하고, Suspense 컴포넌트를 사용하여 로딩 중일 때 보여줄 fallback UI를 설정할 수 있습니다.

 

(App.js)

import {Detail} from './routes/Components'
import Cart from './routes/Cart'

Detail과 Cart 컴포넌트는 메인페이지에서 보이지 않고 있기 때문에 위의 코드를 아래와 같이 변경할 수 있습니다.

(App.js)

import {lazy, Suspense, useEffect, useState} from 'react'

const Detail = lazy( () => import('./routes/Components.js') )
const Cart = lazy( () => import('./routes/Cart.js') )

이렇게하면 Detail 컴포넌트와 Cart 컴포넌트는 lazy 함수로 필요한 시점에 로딩되며, 첫 페이지 로딩속도를 향상시킬 수 있습니다.

 

function App() {
  return (
    <div>
      {/* fallback 속성에 로딩 중일 때 보여줄 UI를 작성합니다. */}
      <Suspense fallback={<div>Loading...</div>}>
        <Detail shoes={shoes} />
      </Suspense>
    </div>
  );
}

그리고 Suspense 컴포넌트로 Detail 컴포넌트가 로딩중일 때 대신 보여줄 fallback UI를 위와 같이 만들 수 있습니다.