memo 사용하는 이유

컴포넌트의 props가 바뀌지 않았다면 리렌더링 되는것을 방지하여 컴포넌트의 성능을 최적화 할 수 있도록 해줌.

React.memo()

React.memo()로 컴포넌트를 감싸면, 리액트는 컴포넌트를 메모리제이션 하고 불필요한 렌더링은 건너뜀.

Dom의 업데이트를 결정할 때, 리액트는 컴포넌트를 처음으로 렌더링하고, 이전 렌더 결과와 비교를 할 것이다. 만약 렌더 결과가 다르다면 리액트는 돔을 업데이트.

memo 구문은 다음과 같다

React.memo(컴포넌트)

예제 소스

function Btn({btnText, changeValue, fontSize}){

        return(
            <button 
                onClick={changeValue}
                style={{
                backgroundColor : "tomato",
                color : "white",
                padding:"10px 20px",
                border : 0,
                borderRadius : 10,
                fontSize : fontSize
            }}>{btnText}</button>
        )
    }

const MemorizedBtn = React.memo(Btn);

function App() {
        
        const [value, setValue] = React.useState("Save Change");
        const changeValue = () => setValue("Revert Change");

        return(
            <div>
                <Btn btnText={value} changeValue={changeValue} fontSize={18}/>
                <Btn btnText="Continue"/>
            </div>
        );
    };

const root = document.querySelector("#root");
ReactDOM.render(<App/>, root);