Props(2) - Memorize

* 이벤트리스너로 설정된  onChange (#1)랑 Props에 있는 onChange (#2)랑 이름은 같더라도, 전혀 다름

 

import logo from './logo.svg';
import './App.css';
import React, { useState } from 'react';

function Btn({ text, onClick}){
  console.log(text, "was rendered")
  return <button 
        onClick={onClick}                 ----- #1
        style={{
        background: "tomato",
        color: "white",
        padding: "10px 20px",
        borderRadius: 10,
        border: 0
      }}>
        {text}               
        </button>; 
}
const MemorizedBtn = React.memo(Btn);   --- #3

function App(){
  const [value, setValue] = React.useState("Save Changes") 
  const ChangeValue = () => setValue("Revert Changes"); 
  return(
    <div>
      <MemorizedBtn text={value} onClick={ChangeValue}/>   ----- #2  #4
      **여기서 onChange는 이벤트리스너가 아니라, props이름임 헷갈리지 말기
        text가 props의 이름인 것처럼, onChange도 props이름임.
      
      <MemorizedBtn text="Continue"/>    ----- #5
      </div>
    )}
    
  
export default App;

 

 

처음 rendering 되었을 때

 

 

Save Change를 클릭 후, 새로 rendering이 되었을 때. React.memo(Btn) : #3 에 의해서, state로 되어있는 { } 첫번째 버튼(<MemorizedBtn>: #4)의 text 내용은 변경이 되어 전달이 되지만, state로 되어있지 않은(<MemorizedBtn>: #5) 두번째 버튼은 업데이트가 안됨. 불필요한 업데이트를 없앨 수 있음