[react] reRendering(리렌더링)

🟢 리액트의 특징

자바스크립트와 달리 리액트는 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>

순서

let counter = 0

render()
ReactDom.render(, root) 실행

Container 렌더링(첫번째 렌더링)
Container() 속 {counter} = 0

onClick={countUp}
countUp() 실행

counter = 1

render() 실행
ReactDOM.renderender(, root)

Container 렌더링(두번재 렌더링)
counter = 1 업데이트

🟢 전체 코드

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.17.6/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>

Author And Source

이 문제에 관하여([react] reRendering(리렌더링)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ch9eri/React-reRendering리렌더링

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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