React3. ReactDOM.render()

 

목차

1. React 엘리먼트?
2. DOM에 엘리먼트 렌더링하기: ReactDOM.render() 메서드
3. DOM에 렌더링된 엘리먼트 업데이트하기
4. 변경된 부분만 업데이트 - 특정 시점의 UI 변화에 대해 고민하는 접근법

 

 

---

 

 

 

1. React 엘리먼트

• React 앱의 가장 작은 단위이며, 화면에 표시할 내용을 기술함
• 일반 객체
• 불변객체(엘리먼트 생성 이후 해당 엘리먼트의 자식이나 속성 변경 불가)
• 엘리먼트는 특정 시점의 UI를 보여줌
• React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 함

 

---

 

2. DOM에 엘리멘트 렌더링하기

 

• React 엘리먼트를 container DOM에 렌더링
• 현재 ReactComponent 루트(root) 인스턴스에 대한 컴포넌트에 대한 참조를 반환

 

 

• 즉, 생성한 React 엘리먼트를 루트 DOM 노드에 렌더링 하려면, 아래의 메서드의 인자값으로 변수명과 렌더하려는 위치를 전달하면 된다.
• React 엘리먼트가 이전에 container 내부에 렌더링 되었다면 해당 엘리먼트는 업데이트하고 최신의 React 엘리먼트를 반영하는 데 필요한 DOM만 변경

 

• React로 구현된 애플리케이션에는 일반적으로 단일의 루트 DOM 노드가 있다.
• 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있다.

 

 

2-1. 문법

ReactDOM.render(element, container[, callback])

• 첫번째 인자값: 변수명
• 두번째 인자값: 렌더하려는 위치

 

 

 

 

2-2(1). 예제 코드

const element = <h1>
                    seriously, I'm considering dropping this class.
                </h1>

ReactDOM.render(element,document.querySelector('#root'))

 

 

 

2-2(2). 라이브 서버로 결과확인

 

 

---

 

3. DOM에 렌더링된 엘리먼트 업데이트하기

앞서 말한대로 React 엘리먼트는 불변객체이다.

즉, 엘리먼트 생성 이후 해당 엘리먼트의 자식이나 속성 변경 불가하며, 엘리먼트는 특정 시점의 UI를 보여준다.

 

따라서 UI를 업데이트하는 오직 단 하나의 방법은,

새로운 엘리먼트를 생성한 후 ReactDOM.render()메서드에 인자값으로 전달하는 것이다.

 

 

---

 

4. 변경된 부분만 업데이트

React DOM은 인자값으로 들어온 해당 엘리먼트와 그 자식 엘리먼트를

이전의 엘리먼트와 비교하고, DOM을 원하는 상태로 만드는 데 필요한 경우에만 DOM을 업데이트함

 

• 시간의 변화에 따른 UI 변화에 대해 고민하는 접근법(x)
• 특정 시점의 UI 변화에 대해 고민하는 접근법 (o) 

 

 

5. 참고

<참고1>
ReactDOM.render()는 전달한 컨테이너 노드의 콘텐츠를 제어함
처음 호출 할 때 기존의 DOM 엘리먼트를 교체, 이후 호출은 React의 DOM diffing 알고리즘을 사용하여 더욱 효율적으로 업데이트


<참고2>
ReactDOM.render()는 컨테이너 노드를 수정하지 않고 컨테이너의 하위 노드만 수정
그렇기 때문에 자식 노드를 덮어쓸 필요 없이 기존의 DOM 노드에 컴포넌트를 추가 가능


<참고3>
ReactDOM.render()는 현재 ReactComponent 루트(root) 인스턴스에 대한 참조를 반환

그러나 이 반환 값을 사용하는 것은 레거시이며 React 신규 버전이 컴포넌트를 비동기로 렌더링하는 경우가 있기 때문에 피해야 함.
ReactComponent 인스턴스의 참조가 필요하다면 권장하는 해결책은 루트 엘리먼트에 콜백 ref를 붙이는 것.


<참고4>
ReactDOM.render()를 사용해 서버에서 렌더링한 컨테이너에 이벤트를 보충하는 것은 권장되지 않으며
React 17 버전에서 삭제될 예정. hydrate() 메서드 사용이 권장됨