React_Props (노마드코더)

김재민·2022년 7월 30일

개요

만약 내가 만든 어플리케션이 1000개의 컴포넌트가 존재한다면 변화가 있는 컴포넌트를 리렌더링 하기 위해서 변화가 없는 컴포넌트까지 모든 컴포넌트들을 매번 리렌더링한다면 효율성이 많이 떨어지고 성능이 지연될 수 있다.

그런 부분들을 방지하기 위해 렌더링 결과를 메모이징함으로써, 불필요한 리렌더링을 건너뛴다.

React.memo()

React는 먼저 컴포넌트를 렌더링한 뒤, 이전 렌더링 결과와 비교하여 DOM 업데이트를 결정한다. 만약 렌더링 결과가 이전과 다르다면, React는 DOM을 업데이트한다.

컴포넌트가 React.memo()로 래핑될 때, React는 컴포넌트를 렌더링하고 결과를 메모이징한다. 그리고 다음 렌더링이 일어날 때 props가 같다면, React는 메모이징(Memoizing)된 내용을 재사용한다.

Memoizing을 사용하지 않은 코드

function Btn({text, color, changeValue}){
        console.log(text, "was rendered");
        return( 
        <button 
            onClick={changeValue}
            
            style={{
            backgroundColor:"tomato",
            color : color,
            padding:"10px 20px",
            border:0,
            borderRadius:10
        }}>{text}</button>
        
        );
    }
    
    function ConfirmBtn(){
        return <button>Confirm</button>
    }

    //const MemorizedBtn = React.memo(Btn);
    function App(){
        const [value, setValue] = React.useState("Save Changes"); 
        const changeValue = () => setValue("Revert Changes");
        return ( 
            <div>
                <Btn text={value} changeValue={changeValue}/>
                <Btn text="Continue" color="white"/>
            </div>            
        );
    
    }

처음 렌더링이 되면서 console에서 컴포넌트 렌더링을 확인할 수 있고 Save Btn을 클릭한 후에 두개의 컴포넌트에 대한 렌더링을 확인할 수 있다. 하지만 변한것은 Save Btn 뿐이기 때문에 굳이 Continue까지 렌더링 할 필요는 없다.

React.memo 사용 코드

function Btn({text, color, changeValue}){
        console.log(text, "was rendered");
        return( 
        <button 
            onClick={changeValue}
            
            style={{
            backgroundColor:"tomato",
            color : color,
            padding:"10px 20px",
            border:0,
            borderRadius:10
        }}>{text}</button>
        
        );
    }


const MemorizedBtn = React.memo(Btn);
    function App(){
        const [value, setValue] = React.useState("Save Changes"); 
        const changeValue = () => setValue("Revert Changes");
        return ( 
            <div>
                <MemorizedBtn text={value} changeValue={changeValue}/>
                <MemorizedBtn text="Continue" color="white"/>
            </div>            
        );
    
    }