엘리먼트 렌더링하기

이전 섹션인 엘리먼트와 JSX에서 우리는 리액트 엘리먼트를 어떻게 만들고 관리하는지 배웠습니다. 이번 섹션에서 우리는 우리가 만든 엘리먼트를 DOM 에 렌더링하는 방법을 배울것입니다.

우리가 전에 이야기한것처럼 React.element 에는 우리가 화면에서 볼 내용이 작성되어 있습니다.

let element = <h1> {React.string("Hello World")} </h1>

브라우저 DOM 엘리먼트와 달리 리액트 엘리먼트는 일반 객체이며 생성 비용이 저렴합니다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 합니다.

DOM에 엘리먼트 렌더링하기

다음과 같은 div를 포함하는 HTML 파일이 있다고 가정 해보겠습니다.

<div id="root" />

우리는 이 DOM 노드 내부의 모든것이 ReactDOM에 의해 관리되기 때문에 이것을 “root” DOM 노드라고 부릅니다.

순수 리액트 애플리케이션은 주로 하나의 루트 DOM 노드를 이용합니다. 만약 기존 앱에 리액트를 상호운용하려면 원하는만큼 격리 된 루트 DOM 노드를 가질 수 있습니다.

우리의 리액트 애플리케이션을 root div 에 렌더링하기 위해서는 다음 두 스텝을 거치면 됩니다.

• ReactDOM.querySelector를 사용하여 DOM 노드 찾기
• 쿼리로 찾은 Dom.element를 ReactDOM.render 함수를 이용해 리액트 엘리먼트 렌더링하기

여기 root div 우리 애플리케이션을 렌더링하는 예제가 있습니다.

/* Dom 접근은 실패할 가능성이 있습니다. */
/* ReScript는 엣지 케이스에 대한 명시적인 핸들링을 할 수 있죠! */
switch(ReactDOM.querySelector("#root")){
  | Some(root) => ReactDOM.render(<div> React.string("Hello Andrea") </div>, root)
  | None => () /* 아무것도 하지 않음 */
}

리액트 엘리먼트는 불변적입니다. 한 번 엘리먼트를 만들면, 여러분은 그 엘리먼트의 자식 요소나 속성을 변경시킬 수 없습니다. 엘리먼트는 영화의 단일 프레임과 같습니다. 엘리먼트는 특정 시점의 UI를 나타냅니다.

ReactDOM.render로 초기 렌더링 된 요소를 이후에 업데이트 하려면 리액트 컴포넌트와 상태관리 같은 몇 가지 개념을 더 이해해야합니다. 우선은 리액트 애플리케이션을 단지 엘리먼트 트리구조로 상상해보고 몇몇 엘리먼트가 애플리케이션의 수명주기동안 교체될 수 있다는 점을 알아두세요.

리액트는 엘리먼트 변경을 자동으로 인식하고 새 엘리먼트 트리로 가져오는 데에 꼭 필요한 DOM만 업데이트를 적용합니다.