memo로 컴포넌트 재랜더링 막기

특정 props 값을 바꿔도 컴포넌트가 가지고 있는 하위 컴포넌트가 전부 재랜더링되는 것을 막기 위한 기술

function Parent(props) {
    return(
        <div>
            <Child1 name={props.name}></Child1>
            <Child2 age={props.age}></Child2>
        </div>
    )
}

function Child1(props) {
    useEffect(() => { console.log("child1")});
    return <div>111</div>
}
function Child2(props) {
    useEffect(() => { console.log("child2")});
    return <div>222</div>
}

// Parent에 들어오는 props 내용 중 name 혹은 age 하나만 바뀌어도 Child1,2모두 재랜더링된다.

Child2만 변경해보자

function Child1(props) {
    useEffect(() => { console.log("child1")});
    return <div>111</div>
}
// memo로 감싸준다.
let Child2 = memo(function() {
    useEffect(() => { console.log("child2")});
    return <div>222</div>
});

이제 Child2는 Parent.props.age가 변경되지 않으면 재랜더링되지 않는다.