section2. 3-11. 억울한 자식 리렌더링 막기(PureComponent와 memo)

2024. 5. 23. 00:07

shouldComponentUpdate 을 구현하는 것이 복잡하다면 extends Component 대신 extends PureComponent를 하면 된다. PureComponent는 shouldComponentUpdate를 알아서 구현한 컴포넌트라고 한다.

PureComponent의 원리는 state들이 바뀌었는지 안바뀌었는지 판단해서 shouldComponent에 return true를 할지 false를할지 결정한다. 하지만 state가 array이거나 object라면 불변성을 지켜야만 변경점을 알아차리고 리렌더링을 해준다. (이건 일반 Component도 마찬가지)

▲ 강의에서 말하고 싶었던 것 : {a:1}에서 setState {a:1}을 할 때 새로 렌더링하므로 state에 객체 구조를 안쓰는게 좋다고한다.

(배열안에 객체넣고 그 안에 배열넣고 이렇게 자료구조를 짜는 것은 적합하지 않다고함.)

클래스 컴포넌트의 PureComponent 정리

1. PureComponent는 state가 바뀌었는지 안바뀌었는지를 알아차리기 때문에 바뀌는 경우에만 리렌더링을 한다. (그러므로 PureComponent 를 자주 써라)

2. state가 객체나 배열이라면 불변성을 지키기 위해 spread 연산자를 사용해서 매번 새로운 배열, 객체를 만들어주자.

3-9번 부터의 목표

숫자야구에서 input창에 글을 쓰면 <TryHooks /> 컴포넌트까지 리렌더링이 되어서 성능 낭비가 발생한다.

부모 컴포넌트가 리렌더링 되면서 자식 컴포넌트까지 리렌더링 되는 상황인데 이것을 해결하고자 한다.

React.memo

그렇다면 어떻게 해결해야할까?

<TryHooks /> 는 클래스형 컴포넌트가 아니라 함수 컴포넌트라서 PureComponent을 사용할 수 가 없다.

함수 컴포넌트에서도 PureComponent 와 같은 역할을 해주는 것이 있는데 React.memo를 사용하면 된다.

memo의 역할은 부모 컴포넌트가 리렌더링 됐을 때 자식 컴포넌트가 리렌더링 되는 것을 막아준다.대신에 state나 props가 바뀌었을 때는 여전히 리렌더링 된다. (당연히 되어야하는 것이기도 하다.)

import React, {memo} from "react";

const TryHooks = memo(({index, value, test}) => {
    return (
        <li>
            {index}. <b>{value}</b> {test}
        </li>
    )
});
TryHooks.displayName = 'TryHooks'
export default TryHooks;

memo로 감싸주기만 하면 된다.

TryHooks.displayName = 'TryHooks'

해당 부분은 memo를 감싸면 개발자도구에서 보는 컴포넌트 이름이 이상하게 나오는데 그것을 우리가 설정한 이름으로 보이게 해주는 부분이다.

삽질러