React 작동 원리

James·2021년 7월 12일
1

기술정리

목록 보기
1/4

리액트는 어떻게 동작하는가?

  • 리액트는 SPA로 사용자와의 인터렉션이 일어났을 때 화면 깜빡임없이 변경 사항만 부드럽게 바뀌어 화면에 표시해주는 UI 프레임워크입니다.

  • 리액트가 변경사항만 바꿀 수 있게 하는 핵심 기술은 바로 Virtual DOM입니다.

  • 기본적으로 DOM에 변경 사항이 생기면 HTML Parser -> DOM Tree -> CSSOM -> Render Tree -> Painting -> Display 라는 긴 과정을 최상위 엘리먼트부터 변경이 있는 DOM까지 다시 진행시킵니다.

  • 반면 Virtual DOM을 사용하면 아래 그림과 같이 변화가 생긴 컴포넌트와 그 자손에 대해서만 Virtual DOM을 생성하고 변화 전 Virtual DOM과 변화 후 Virtual DOM을 비교하여 변경된 부분만 DOM Tree ~ Painting -> Display 라는 과정을 거치게 합니다.

  • 따라서 리액트는 실제 DOM이 아니라 Virtual DOM을 조작함으로써 성능 개선과 깜빡임없는 사용성이라는 두 마리를 토끼를 잡은 셈입니다.

리액트를 사용할 때는 항상 DOM을 조작해서는 안되는 것인가?

  • 대부분의 경우에 있어서 DOM을 직접 조작하는 것은 지양해야 합니다.
  • 하지만 항상 DOM을 조작해서는 안되는 것은 아닙니다. 아래 코드는 리액트로 셋업했을 때 public/index.html 파일의 body 엘리먼트 파트입니다.
  • 리액트에서 다루는 모든 컴포넌트들은 div#root의 자손들입니다.
  • 즉 Virtual DOM은 div#root의 자손들에 한해서만 적용되는 것이지 div#root의 부모인 body 엘리먼트에 대해서는 해당 사항이 없습니다.
  • 따라서 경우에 따라 body 엘리먼트 DOM을 직접 조작하는 다음과 같은 코드를 사용할 때도 있습니다.
  • 모달창이 열렸을 때 스크롤 방지를 위해 document.body.style.overflow = "hidden" 라는 코드를 사용할 수 있습니다. 또한 body 엘리먼트의 DOM Tree의 최상위에 있기 때문에 불필요한 리렌더링이라고 말하기 어렵습니다.
  • 만약 컴포넌트 내에서 직접 DOM 조작이 필요할 때는 useRef를 이용하면 됩니다.
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
profile
웹개발자 James 입니다.

0개의 댓글