[ React ] 엘리먼트 렌더링
엘리먼트 렌더링
🗣 엘리먼트는 리액트 앱의 가장 작은 단위
브라우저 DOM 엘리먼트와 달리,
React 엘리먼트는 일반 객체이며 쉽게 생성할 수 있다.
React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다.
DOM에 엘리먼트 렌더링하기
이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에
root DOM 노드라고 부른다.
React로 구현된 애플리케이션은 일반적으로 하나의 root DOM 노드가 있다.
React 엘리먼트를 root DOM 노드에 렌더링하려면 둘 다
ReactDOM.render()
로 전달하면 된다.
ReactDOM.render(<App />, document.getElementById("root"));
✔️ 즉, html에 루트라는 아이디가 있는 파일을 불러오고
그 파일 안에 보여주고싶은 엘리먼트를 render에 담아준다.
렌더링 된 엘리먼트 업데이트하기
리액트 엘리먼트는 불변객체로, 생성 이후엔 변경할 수 없다.
하지만, 변경하고 싶다면, ReactDOM.render()
에
새로운 엘리먼트를 생성해서 담아준다.
변경된 부분만 업데이트하기
리액트 DOM은 해당 엘리먼트 들을 이전의 엘리먼트와 비교하고
필요한 부분만 DOM을 업데이트합니다.
참고자료 : 리액트 공식문서
Author And Source
이 문제에 관하여([ React ] 엘리먼트 렌더링), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@_dodo_hee/React-Rendering저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)