[react] reRendering(리렌더링)

12617 단어 ReactReact

🟢 리액트의 특징

자바스크립트와 달리 리액트는 UI에서 바뀐 부분만 업데이트함

<body>
    <span> Total clicks: 0</span>
    <button id="btn">click me</button>
  </body>

js에서는 body와 span이 통째로 업데이트 됨

<div>
	<h3>Total clicks: {counter}</h3>
    <button onClick={countUp}>Click me</button>
</div>

react에서는 {counter} 속만 업데이트 됨

🟢 예제

<script type="text/babel">
      const root = document.getElementById("root");
      let counter = 0;

      function countUp() {
        counter = counter + 1;
        render();
      }
      function render() {
        ReactDOM.render(<Container />, root);
      }
      function Container() {
        return (
          <div>
            <h3>Total clicks: {counter}</h3>
            <button onClick={countUp}>Click me</button>
          </div>
        );
      }
      render();
    </script>

순서

  1. let counter = 0
  1. render()
    ReactDom.render(, root) 실행
  1. Container 렌더링(첫번째 렌더링)
    Container() 속 {counter} = 0
  1. onClick={countUp}
    countUp() 실행
  1. counter = 1
  1. render() 실행
    ReactDOM.renderender(, root)
  1. Container 렌더링(두번재 렌더링)
    counter = 1 업데이트

🟢 전체 코드

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
    <script type="text/babel">
      const root = document.getElementById("root");
      let counter = 0;

      function countUp() {
        counter = counter + 1;
        render();
      }
      function render() {
        ReactDOM.render(<Container />, root);
      }
      function Container() {
        return (
          <div>
            <h3>Total clicks: {counter}</h3>
            <button onClick={countUp}>Click me</button>
          </div>
        );
      }
      render();
    </script>
  </body>
</html>

[C언어] 백준 1929 : 소수 구하기
CUBE 절

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage