[ 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을 업데이트합니다.

참고자료 : 리액트 공식문서