서론
학습 목표 📖
- React.memo() 를 스마트하게 사용이 가능해진다.
본론
Re-render
브라우저가 렌더링 되고 난 후에 레이아웃을 변경했을때 브라우저는 다시 렌더링을 하게 된다.
이 과정에서 리플로우 그리고 리페인트가 발생하게 된다.
리액트에서 컴포넌트간 Props로 데이터를 전달한 후 상위 컴포넌트에서 Props가 변경 되었을때 하위 컴포넌트에서 무조건 렌더링을 다시 하게 된다.
특이한 점은 상위 컴포넌트에서 파생된 모든 하위 컴포넌트에서 렌더링 후 DOM 업데이트가 다시 발생한다는 것이다.
아주 간단한 코드를 보면서 바로 이해해보자.
export default function() {
return (
<Parent 이름="제임스" 나이="20"></Parent>
)
}
function Parent({이름, 나이}){
return (
<div>
<Child1 이름={이름}></Child1>
<Child2 나이={나이}></Child2>
</div>
)
}
function Child1(){
useEffect( ()=>{ console.log('렌더링됨1') } );
return <div>1</div>
}
function Child2(){
useEffect( ()=>{ console.log('렌더링됨2') } );
return <div>2</div>
}크롬 브라우저에서 리액트 데브 툴을 열고 Props에서 이름="존" 으로 변경하면 Child2도 재렌더링되어 '렌더링됨2'이 로그에 찍히는것을 볼 수 있다.
그럼 Child1만 DOM에 업데이트 되게 하려면 어떻게 해야 할까?
React.memo() 란?
리액트에서는 변경된 바로 그 컴포넌트만 DOM에 업데이트를 하게 해주는 memo 훅을 제공해준다.
원리는 심플하다.
Memo는 Memoization의 약자로 기억한다는 뜻인데 특정 부분을 기억하고 변경이 발생했을때 이전 렌더와 변경된 렌더를 비교한다.
만약 같다면 DOM을 업데이트 하지 않고 만약 다르다면 DOM 업데이트를 한다.
React.memo() 사용법
그럼 사용법을 알아보자.
import {memo} from "react";
const Child2 = memo(()=>{
useEffect( ()=>{ console.log('렌더링됨2') } );
return <div>2222</div>
});먼저 memo 훅을 import 해온다.
컴포넌트를 익명함수로 작성한 후 import 해온 memo로 감싼다.
끝이다. 매우 간단한 것을 볼 수 있다.
아까와 같이 리액트 데브 툴즈에서 name을 변경하면 이번에는 Child2의 '렌더링됨2'는 찍히지 않는것을 확인할 수 있다.
React.memo()를 항상 사용해야 할까?
이렇게만 보면 매우 좋고 모든 컴포넌트에 memo를 감싸야 할 것만 같다.
하지만 앞서 언급한 React.memo()의 원리를 다시 살펴보자.
memo는 Memoization의 약자로 기억한다는 뜻인데 특정 부분을 기억하고 변경이 발생했을때 이전 렌더와 변경된 렌더를 비교한다.
memo 훅은 특정 값을 기억해놓고 비교를 한다는 것인데 컴포넌트가 단순하고 매번 다른 값을 렌더링 하는 경우에는 사용해도 큰 이점이 없다.
어차피 매번 다른 값을 렌더링하는데 굳이 자원을 낭비해서 비교하는 알고리즘을 실행할 필요가 있을까?
당연히 없다.
그럼 어느 경우에 사용해야 효율적일까?
한 예제로 실시간 영화 순위 사이트를 만들었다고 가정하자.
각 영화별로 몇명의 관객들이 관람했는지가 기록되어 있고 이에 따라 순위가 변동된다.
이럴 경우에 영화제목, 줄거리 등은 memo로 감싸 렌더링을 막고 관람객 수만 변경되도록 하는게 효율적이라고 볼 수 있다.
React.memo()를 언제 사용해야 하는지에 대해 잘 설명해 놓은 이미지를 발견해 가져왔다.
결론
React.memo()가 무엇이고 언제 어떻게 사용해야 효율적인지에 대해서 알아보았다.
memo는 중간~큰 크기의 컴포넌트가 props내에서 특정 부분이 바뀌고 같은 결과를 도출해낼때 사용하면 된다 라는 것을 기억하자.
쉽게 말해서 같은 props 내에서 자주 안바뀌는 부분에 적용시키면 된다.
