오늘의 나는 무엇을 새롭게 배웠나요?

[1] React 웹 개발 시작하기

[2] ReactDOM.render VS createRoot

https://github.com/reactwg/react-18/discussions/5

둘 다 React element를 DOM에 렌더링하기 위해 사용된다.

1. ReactDOM.render()는 React 컴포넌트를 DOM의 컨테이너로 렌더링하는 전통적인 방법이다.

   • ReactDOM 모듈에서 가져와서 사용하고, React 엘리먼트와 렌더링 대상의 DOM 노드를 argument로 받는다.

   import ReactDOM from 'react-dom';
   import MyComponent from './MyComponent';
   
   ReactDOM.render(<MyComponent />, documt.getElementById('root');
   // 업데이트가 발생해서 다시 렌더링해도 DOM 엘리먼트를 통해 Root에 접근한다.

   • 이런 식으로 Root를 생성할 때 container를 넘겨주는 형태로 랏용하기 때문에 container에 변경이 없더라도 계속 DOM에 접근해야한다.

2. createRoot()는 React 18 버전에서 새로 도입된 함수이다. React의 새로운 렌더링 방식인 Concurrent 모드에서 사용된다. 즉, React가 자동으로 Concurrent 모드를 사용하게 된다.

   • 이 함수 또한 ReactDOM 모듈에서 가져와서 사용하며, 렌더링 대상의 DOM 노드를 argument로 받는다.

   import ReactDOM from 'react-dom';
   import MyComponent from './MyComponent';
   
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(<MyComponent />);
   // 업데이트가 발생했을 때, container를 다시 넘겨줄 필요가 없다.

• [hydrationRoot()](https://velog.io/@ggong/React-18%EC%97%90%EC%84%9C-ReactDOM.render-%EB%8C%80%EC%8B%A0-createRoot-%EC%93%B0%EA%B8%B0)라는 메소드도 도입되었다고 한다.

Concurrent 모드 (동시 모드)

애플리케이션의 사용자 경험을 향상시키기 위해, 컴포넌트의 렌더링을 중단하고 다시 시작할 수 있는 기능을 말한다. 리액트는 UI 렌더링 도중 렌더링 이외의 모든 작업을 차단한다(자바스크립트 자체가 싱글 스레드이기 때문!). 따라서 동시성을 활용해 여러 작업을 작은 단위로 나눈 뒤, 그들 간의 우선순위를 정하고 그에 따라 작업을 번갈아 수행한다. 즉, 작업 간의 전환이 매우 빠르게 이루어지면서 동시에 수행되는 것 처럼 보이게 한다.

ReactDOM.render()를 사용하면 기존 blocking mode로 렌더링이 된다.

createRoot()를 사용하면 concurrent 모드로 렌더링이 되는 것!

따라서, createRoot()를 사용하면 React 애플리케이션에서 Concurrent 모드를 더 쉽게 활성화하고, 더 높은 성능을 얻을 수 있다.

공부하면서 어떤 어려움이 있었나요?

Concurrent 모드에 대해 처음 접하기도 했고, React에 대해 완벽히 이해하지 않은 상태로 접하다보니 개념과 원리에 대해 아직 파악하지 못한 것 같다.

• 관련해 정리되면 주제로 다뤄볼 예정이다.

내일의 나는 무엇을 공부해야 할까요?

• 알고리즘 1문제 풀이
• React 데이터 완강
• 전체 데일리미션
• Weekly Mission 찍먹
• 그동안의 개념 review
  • 제리의 github을 보고 굉장히 자극 받았다! 셀프 질문 + 정리라니.. 나도 깃허브에 시작해보려 한다.