리액트 훅 React Hooks Lazy이란?

리액트 훅 React Hooks Lazy이란?

 

안녕하세요. 오늘은 리액트 훅에서 사용되는 lazy에 관해서 알아보려고 합니다.

프로젝트가 거대해지고 무거워지는 과 동시에 발생하는 문제 중 하나는 로딩 문제일 것입니다.

느려져봐야 0. 몇 초 혹은 몇 초? 일 텐데 그게 큰 상관일까 싶지만, 사실 이는 큰 문제입니다.

많은 개발자들이 0.1초라도 줄이기 위해 최적화 작업에 공을 들이고 있습니다.

그렇기에 우리도 이러한 기능을 알아두면 참 좋을 것입니다.

 

1. Lazy와 Suspense.
2. 사용방법.
3. 마치며.

 

1. Lazy 와 Suspense.

 

Lazy를 사용하기 위해서 꼭 알아야 할 것이 있습니다.

이는 바로 Suspense인데요.  이것 없이 Lazy를 사용할 수 없습니다.

Suspense는 JSX로 사용되며, fallback이라는 prop을 받게 됩니다.

이때 prop의 값을 JSX로 받을 수 있습니다.

 

여기서 Suspense는 감싸고 있는 컴포넌트가 렌더링 과정에 있을 시 fallback에 명시된 JSX를 먼저 보여주게 됩니다.

그리고 컴포넌트의 렌더링이 끝나게 되면 자동으로 해당 컴포넌트를 보여주게 됩니다.

 

이 둘을 사용하기 위해서는 react로부터 import 되어야 합니다.

아래의 예시 코드를 보시죠.

 

import { lazy, Suspense } from 'react';

 

자 이렇게 lazy를 사용할 컴포넌트 안에 위와 같이 import 해주셔야 합니다.

자 그럼 사용 준비는 끝이 났습니다. 그럼 사용 방법을 알아보러 가시죠.

 

 

2. 사용방법.

 

사용방법을 알아보겠습니다.

처음 우리는 새로운 컴포넌트가 필요합니다. 이를 위해 src 폴더에 components폴더를 생성하고

그 안에 임의의 컴포넌트를 생성하겠습니다.

 

저는 MyTest라는 임의의 컴포넌트를 생성하였습니다.

코드는 아래의 코드 블록을 확인해주세요.

 

const MyTest = () => {
  return <div>This is MyTest component</div>;
};

export default MyTest;

이 코드를 더 짧게 만드시려면,

아래와 같이도 작성 가능합니다.

const MyTest = () => <div>This is MyTest component</div>;

export default MyTest;

 

 

 

자 그럼 App 파일을 보도록 하겠습니다.

저는 App에서 lazy를 사용할 것이기에, App 안에 lazy와 Suspense를 import 합니다.

 

import { lazy, Suspense } from 'react';
const MyTest = lazy(() => import('./components/myTest'));

const App = () => {
  return (
    <div className='App'>
      <Suspense fallback={<div>loading...</div>}>
        <MyTest />
      </Suspense>
    </div>
  );
};

export default App;

 

자 그럼 천천히 위의 코드를 보겠습니다.

먼저 제일 위를 보시면 lazy와 Suspense를 import 하였습니다.

그다음 변수로써 MyTest를 초기화하고 lazy 함수를 이용했습니다. 이는 콜백 함수를 파라미터로 받습니다.

그 뒤 import 하려는 파일의 경로를 작성해주었습니다.

 

그다음 Suspense를 작성해줍니다. 위에 언급한 것과 같이 Suspense는 fallback이라는 prop을 받습니다.

이는 JSX로 <div>loading...</div>이라고 작성해주었습니다.

그 뒤 Suspense안에 MyTest를 넣어줍니다.

 

그렇다면 이미 우리는 모두 끝낸 것입니다.

 

이론 상 처음 페이지가 로드되거나 페이지가 리로드 될 때 MyTest는 렌더링 과정에 들어갈 것이고,

그 과정에서 먼저 fallback에 명시된 JSX가 유저에게 보입니다.

그 뒤 MyTest가 렌더링을 끝내고 보여지게 될 수 있을 때 MyTest가 유저에게 보이며 fallback의 값은 사라집니다.

 

이를 확인하기 위해 페이지를 리로드 해보세요.

너무 빨라서 확인하기 힘드신가요? 혹은 변화를 확인할 순간도 없이 렌더링이 끝났나요??

이는 우리의 프로젝트가 너무 작기 때문입니다.

이를 위해서 네트워크의 성능을 낮춰 줄 필요가 있습니다.

 

어떻게 하는지 가볍게 알아보겠습니다.

 

1. 개발자 툴을 열어주세요. 크롬의 경우 F12번을 눌러 주세요.
2. Network 탭으로 들어가 주세요.
3. No throtting이라고 나와있는 곳을 눌러주신 뒤 Fast 3G 혹은 Slow 3G로 바꿔주세요.
4. 다시 리로드 해보세요.

아마 이렇게 하시면 확인이 가능하실 겁니다.

이는 일시적으로 네트워크의 속도를 늦춰주는 것입니다.

 

 

3. 마무리.

 

오늘은 lazy에 관해서 알아보았습니다.

사실 혼자서 개인 프로젝트를 하는 것으론 이러한 기능을 사용하기 어려울 수 있습니다.

성능의 차이 혹은 로딩 시간에 큰 영향을 미칠 정도의 규모의 프로젝트를 하지 않기 때문이죠.

하지만 몰라서 사용하지 못하는 것과 알지만 사용할 이유가 없어 사용하지 않는 것은 다릅니다.

분명히 회사에서 큰 프로젝트를 맡거나 다른 개발자들과 협업을 하다 보면 필요할 수 있는 기능입니다.

 

항상 개발 툴, 개발 라이브러리, 프레임워크는 하루가 다르게 발전하고 바뀌어 갑니다.

옛것을 하는 것도 중요하지만 새로 나온 것 혹은 몰랐던 기능을 사용하는 것 또한 정말 중요합니다.

항상 노력하시고 열심히 공부하시기 바랍니다.

저 역시 이렇게 블로그를 개설 후 스스로 공부하고 게시글을 올리면서 많이 배우게 되는 것 같습니다.

이렇게 블로그를 방문해주시는 유저분들과 같이 공부하고 나눌 수 있어서 기쁩니다.

항상 응원하겠습니다.

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

Es gibt keine perfekte Vorbereitung.

Perfekte Vorbereitung ist das Gleiche, wie nie anzufangen.