react.js 리엑트 memo

아래와 같이 적었을 때 부모컴포넌트인 App 상태가 변경되면서 버튼 두개 다 리렌더링 됨!

그러나 confrim2는 바뀌는게 없는데 다시 리렌더링된다.

const root = document.getElementById("root");

       function Btn({text,changeValue}){ //changeValue 라는 프로프를 onClick이벤트 리스너로 사용한것.
        console.log(text+"was render");
       return <button 
            onClick={changeValue}
            style={{
               backgroundColor:"red",color:'#fff',padding:"10px 20px",borderRadius:10,marginBottom:"10px"
            }}>{text}</button>
       }
     
  
        function App(){
           const [value,setValue] = React.useState("save changes");
           const changeValue2 = ()=>{
            setValue("revert changes");
           } ;
           return(
                <div>
                 <Btn text={value} changeValue={changeValue2}/> 
                 <Btn text="confirm2" />
                </div>
           );
        } 

            ReactDOM.render(<App/>,root);

 

리엑트 메모를 쓰면 해결!!

const root = document.getElementById("root");

       function Btn({text,changeValue}){ //changeValue 라는 프로프를 onClick이벤트 리스너로 사용한것.
        console.log(text+"was render");
       return <button 
            onClick={changeValue}
            style={{
               backgroundColor:"red",color:'#fff',padding:"10px 20px",borderRadius:10,marginBottom:"10px"
            }}>{text}</button>
       }
     
       const MemorizeBtn = React.memo(Btn);  //대박 이거해서 둘다 안바뀌고 변화한애만 수정됨.
       //부모가 변경된다?그럼 모든 자식들이 다시 그려질텐데 추후에 어플리케이션이 느려지는 원인이 될수있음.
        function App(){
           const [value,setValue] = React.useState("save changes");
           const changeValue2 = ()=>{
            setValue("revert changes");
           } ;
           return(
                <div>
                 <MemorizeBtn text={value} changeValue={changeValue2}/> 
                 <MemorizeBtn text="confirm2" />
                </div>
           );
        } 

            ReactDOM.render(<App/>,root);

이렇게 함으로써 props가 안바뀌면 다시 안그려도 된다는걸 리엑트에게 알려줄 수 있게 됨.

 

로그 보면 처음에 렌더링 될땐 둘다 되었는데(1번)

버튼 클릭했을 때 렌더링 되는거(2번) 보면 변경된 버튼만 리렌더링 되었음을 로그로 통해 확인할 수 있음..

대박이다..!!