Coding Apple, React 강좌 내용 정리.19 - lazy loading / React devtools, memo (재렌더링 방지)

lazy loading / React devtools

1. 되도록이면 함수나 오브젝트는 별도로 선언해서 사용.

  메모리문제를 어느정도 보완이 가능하다<?>

ex) function Clicked() { ... }

   <button onClick={Clicked() } ...

 

  var myStyle1 = { color : 'white' }

  <tr style={myStyle1}>

 

2. 애니메이션 효과 등을 많이쓰지말고 되도록 transform 이용

margin, width, paadding 이런 레이아웃과 관련된 속성들이 변경되면 브라우저 렌더링시간이 오래걸린다.

 

3. 컴포넌트 import할 때, lazy loading 해보기

초기에 페이지를 올릴 때 (import Detail from './Detail'; ) 많이 올리면 시간이 걸리기에.

-> lazy , Suspense 이용

import {lazy, Suspense} from 'react'

let Detail = lazy( ()=> { return import('./Detail.js') } );  //아니면 이렇게 쓰기도. lazy( ()=> import('./Detail.js') )

→ Detail를 호출/사용할 때 import 시킨다.

 

대부분 Suspens라는 걸 같이 쓰는데

<Route path="/detail/:id">
  <Detail shoes={shoes} 재고={재고} />
</Route>
=>
<Suspense fallback={<div>Loading...아니면 컴포넌트</div>}>
    <Detail shoes={shoes} 재고={재고} />
</Suspense>

 

React Dev Tools

크롬 확장 프로그램으로 설치가능.

• React 내부 구조 보기
• 데이터 조작
• 렌더링 컴포넌트 표시 및 쓸데없이 다시 렌더링되는 컴포넌트도 찾기 가능

 

컴포넌트 재렌더링 체크할 것.

컴포넌트에 있는 props나 state가 변경되면 그것들을 사용하는 html 전부 다시 렌더링된다.

function Child1() {
	useEffect( ()=> { console.log("렌더링1")});
    return <div>111</div>
}
function Child2() {
	useEffect( ()=> { console.log("렌더링2")});
}
-----
컴포넌트에 있는 props나 state가 변경서 그것들을 사용하는 HTML이 전부 다시 렌더링
function Parent(props) {
	return (
    	<Child1 이름={props.이름}></Child1>
        <Child2 나이={props.나이}></Child2>
    )}

memo() : 불필요한 재렌더링 막기

props가 변경이 안된 컴포넌트는 다시 렌더링 방지

1. 'react'에서 import {memo}

2. memo()로 컴포넌트 감싸기

let Child2 = memo( function() {
    useEffect(() => {
        console.log('렌더링2')
    });
    return <div>2222</div>
});

3. 컴포넌트와 관련된 props가 변경이 될 때에만 다시 렌더링된다.

 

memo의 단점

= 기존 props와 바귄 props 비교 후 컴포넌트 업데이트할지를 결정하는데,

이런 로직으로 props가 많아지면 연산이 느려질 수 있다.