ReactDom
2022-06-08
4. ReactDOM
- npm과 ES6의 경우 import ReactDOM form ‘react-dom’으로 작성 / npm과 ES5의 경우 var ReactDOM = require(‘react-dom’)으로 작성
- 브라우저 지원 : IE9 상위 보전을 포함한 모든 주요 브라우저 지원
a. render()
- container DOM에 렌더링하고 컴포넌트에 대한 참조를 반환 (무상태의 컴포넌트는 null 반환)
- ReactDOM.render()은 React 17 버전에서 삭제될 예정으로 hydrate()를 사용
// render()
ReactDOM.render(element, container[, callback])
b. hydrate()
- HTML 콘텐츠가 ReactDOMServer로 렌더링된 컨테이너에 이벤트를 보충하기 위해 사용(기존 마크업에 이벤트 리스너 연결)
- 서버와 클라이언트 사이에서 단일 엘리먼트의 어트리뷰트나 텍스트가 불가피하게 다르다면 그 엘리먼트에 suppressHydrationWaring={true}를 추가하면 나타나는 경고를 끌 수 있다. 단, 절대 남용하지 말것.
// hydrate() :
ReactDOM.hydrate(element, container[, callback])
c. unmountComponentAtNode()
- 마운트된 React 컴포넌트를 DOM에서 제거, 컴포넌트 이벤트 랜들러와 state를 정리
- 컨테이너에 아무런 컴포넌트가 마운트 되지 않았다면 해당 함수를 호출하더라도 아무런 동작 X
- 컴포넌트가 마운트 해제되었다면 true / 마운트 해제할 컴포넌트가 존재하지 않는다면 false
// unmountComponentAtNode()
ReactDOM.unmountComponentAtNode(container)
d. findDOMNode()
- 기본 DOM 노드를 이용하는 데 사용되며 이것을 사용하는 것은 컴포넌트 추상화를 위반하기 때문에 권장하지 않는다. 이 메서드는 StricMode에서 권장하지 않는다.
- 매개 변수로 전달 받은 컴포넌트가 DOM 내부에 마운트되었다면 컴포넌트에 해당하는 네이티브 브라우저의 DOM 엘리먼트를 반환함
- 해당 메서드는 Form 필드 값이나 DOM 성능 측정과 같이 DOM에서 값을 읽을 때 유용
- DOM 노드에 ref를 붙일 수 있으며 findDOMNode를 사용할 필요가 없음
- 컴포넌트가 null이나 false를 렌더링할 경우 null을 반환 / 문자를 반환할 경우 문자 값을 포함하고 있는 텍스트 DOM 노드를 반환
- React 16부터 컴포넌트는 여러개의 자식을 fragment를 반환할 수 있으며, 이 경우에 findDOMNode는 비어있지 않은 첫 번째 자식에 해당하는 DOM노드를 반환한다.
// findDOMNode()
ReactDOM.findDOMNode(component)
findDOMNode()는 마운트된 컴포넌트에만 동작한다. (컴포넌트 DOM 내부에 존재해야 함) 마운트되지 않은 컴포넌트를 대상으로 해당 메서드를 호출한다면 Exception 발생. 해당 메서드는 함수 컴포넌트에서 사용 X.
e. createPortal()
- portal을 생성. DOM 컴포넌트 구조의 외부에 존재하는 DOM 노드에 자식을 렌더링 하는 방법 제공
// createPortal()
ReactDOM.createPortal(child, container)