createRoot

 

CreateRoot

const root = createRoot(domNode, options)

- 서버에서 렌더링 되는 경우 hydrateRoot()

- 컴포넌트 자식이 아닌 DOM트리의 다른부분을 렌더링 할 경우 createPortal사용

 

createRoot에 domNode를 넣어 호출하면 브라우저 DOM 엘리먼트 안에 콘텐츠를 표시할 수 있는 React루트를 생성한다.

루트를 생성한 후 root.render를 호출해 그 안에 React컴포넌트를 표시하는 작업이 필요하다. 

 

createRoot를 호출하면 두 가지 메서드를 사용할 수 있게 된다. 

 

1. root.render(reactNode) //root.render(<App/>)
2. root.unmount()

 

1. root.render

render메서드를 통해 reactNode를 브라우저의 DOM노드에 표시하게 된다.

 

2. root.unmount

unmount메서드를 통해 react 루트 내부에서 렌더링된 트리를 삭제 

일반적으로 React만으로 작성되었을 때는 root.unmount를 호출하지 않음

 

다른 프레임워크와 함께 사용되는 경우 특정 dom에 react 컴포넌트를 마운트 한 경우 특정 DOM이 언마운트 될 시에 이 unmount메서드를 호출하여야 메모리 관리 관점에서 좋다.