Written by Parkdev
on January 25, 2024

[React]성능을 개선해보자2 (재랜더링 방지)

두번째 성능 개선 방법(재랜더링 방지)

React의 특성으로 부모 컴포넌트에서 상태가 변경되어 재랜더링에 들어가면
자식 컴포넌트도 전부 재랜더링을 한다.
예를들면 다음과 같은 components가 있다고 가정하자

function Child() {
    return <div>Child</div>
}

function Parent() {
    let [count, setCount] = useState(0);
    return (
    <div>
    	<Child></Child>
        <button onClick={()=>{ setCount(count+1)}}>+1</button>
    </div>
    )
}

이때 버튼을 누를때마다 Child도 재랜더링된다.
- 이를 확인하려면 Child component에서 console.log를 확인해보면 항상 로그가 찍히는 것을 확인할 수 있다.

그렇다면 어떻게 해결할 수 있을 것인가.

memo를 사용하면된다.

import { memo } from "react"

let Child = memo ( function Child() { // 변수에 집어넣고 함수는 memo로 감싸면된다.
    return <div>Child</div>
})

Memo의 정확한 원리

해당 컴포넌트에 전달되는 props 값이 변할때 재랜더링 한다.
그렇다고 모든 컴포넌트를 memo를 사용해서 재랜더링하는것은 오히려 비효율적일 수 있다.
- 왜냐하면 memo가 props값이 변했는지 확인하는 cost가 그냥 component를 재랜더링 하는 cost보다 더 클 수도 있기 때문이다.
- props가 길고 복잡하면 오히려 손해일 수도 있다.
- (사실 대부분 붙일일이 거의 없다.)

참고2. useMemo

//예를들면
function 함수() {
    return 반복문 10억번
}

function App(){
    let result = 함수(); // 재랜더링할때마다 10억번의 반복문이 실행된다.
}

이럴때 useMemo를 사용하면 성능 개선을 달성할 수 있다.

function 함수() {
    return 반복문 10억번
}

function App(){
    let result = 함수();
    useMemo(()=>{return 함수()},);// 처음 컴포넌트 랜더링시 1회만 실행하며 이후에는 실행하지 않는다.
    useMemo(()=>{return 함수()},[state]); // 이러면 state가 변화할때만 실행된다 
}

(어찌보면 useEffect와 기능이 비슷하다 그러나 차이점이 있다.
- useEffect는 모든 랜더링이 다 끝나면 그때서야 실행한다.
- useMemo는 **랜더링 될때 **실행된다

← → Top