React(14) 성능을 개선하는 요소들

목차

memo

Lazy import

Suspense

useTransition, useDeferredValue

---

부모가 렌더링될 때, 자식은 필요할때만 렌더링 하고싶을 때 : memo

• 부모 컴포넌트 안에, 자식 컴포넌트가 있다고 가정하자,
  
• 이 때, 부모에 있는 state가 변경되었을 때, 부모 컴포넌트와, 자식 컴포넌트도 덩달아 재렌더링이 된다.
• 자식 컴포넌트가 굉장히 많은 연산을 해야하는 컴포넌트일 경우,
  자식컴포넌트는 렌더링이 안되고, 필요할때만 렌더링 하고 싶을 때 사용하는
  memo에 대해 알아보자.
• 사용방법은,
  1. import { memo } from "react"로 import 하고,
  2. 재렌더링 되기 싫은 자식 컴포넌트에다가 적용시키면 된다.

• 자식 컴포넌트가 재렌더링 안되는 모습을 볼 수 있다.

 

---

 

필요할 때 만 호출할 때 : Lazy import

• 리액트로 개발한 사이트들은, Single Page Application이다.
  즉, 발행을 한다면,하나의 큰 js파일하나에 모든 코드들이 들어가있기 때문에, 사이즈가 매우 크다.
• 따라서, 컴포넌트 js가 필요하기전에는 호출하지않았다가, 필요해졌을 때에, 불러서 사용을 할 수 있다. 
  (그렇게하면 자원을 절약 할 수 있겠다!)
• lazy import 라는 함수이다.
• 사용방법은,
  
  1. import { lazy } from "react"로 import하고,
  2. 기존의 import Component from "./Component.js"로 import했던 구문을,
     const Component = lazy( () => import("./Component.js") ); 로 바꿔주면 되겠다. 

 

---

 

로딩 시간중에는 : Suspense

• 위 lazy함수를 건 컴포넌트를 킬 때, 다소 로딩시간 지연이 되어서, 시간이 걸릴 수 도 있다.
• 따라서, 유저친화적이게, 컴포넌트가 켜지고 있을 때, 문구를 적어 div에 나타내고 싶어졌을 때 사용하는 Suspense이다.
• 사용방법은,
  1. import { Suspense } from "react" 로 import하고,
  2. lazy가 걸려있는 Component에 <Suspense>태그를 감싸면 되는데,
  3. 이 때, fallback라는 옵션으로 어떠한 문구를 나타낼 지, 타이핑하면 된다.
     <Suspense fallback = { <div> 로딩중이다 </div> } >

 

---

 : useTransition

• ddd

 

 

---

: useDeferredValue