react

nomad code_react js로 영화앱 만들기_#4.1

Kale_coding 2022. 11. 11. 17:12 
<body>
  <div id="root"></div>
</body>

<script type="text/babel">
  function Btn({text, changeValue}){
    console.log(text, "was rendered");
    return(
      <button
        onClick={changeValue}  /* 이벤트리스너 */
        style={{
          backgroundColor: "tomato"
          color: "white"
          padding: "10px 20px"
          border: 0
          borderRadius: 10,
          fontSize: 16
        }}>
          {text}
        </button>
    );
  };
  
  const MemorizeBtn = React.memo(Btn);
  
  function App(){
    const [value, setValue] = React.useState("Save Changes");
    const changeValue = () => setValue("Revert Changes");
    return(
      <div>
        <MemorizeBtn text={value} changeValue={changeValue} /> /* 이벤트리스너x 프로퍼티o */
        <MemorizeBtn text="Continue" />
      </div>
    );
  };
  
  const root = document.getElementById("root");
  ReactDOM.render(<App />, root);
</script>
  • 컴포넌트 안에 작성되는 내용들은 모두 프로퍼티(props) 이다. 이벤트리스너의 이름을 갖고있어도 컴포넌트 안에 작성되면 프로퍼티로 적용된다.
  • 컴포넌트 안에 작성한 프로퍼티는 함수의 인자값으로 넣어주어야 사용할 수 있다.
  • React.memo는 컴포넌트의 내용이 수정되지 않으면 랜더링 하지 않게 해준다.