[React 공식문서 뿌수기] Element

안녕하세요!

 

저는 요즘 좋은 유튜브 채널을 알게 되어 리액트 공식문서를 다시 정리해보며 기초를 다지고 있어요.

해당 채널의 영상 내용과 제가 추가적으로 정리한 내용들을 공유해볼게요!

유튜브 채널 이름은 '가장 쉬운 웹 개발 with Boaz' 인데요, [가장 쉬운 리액트] 카테고리의 영상들을 정주행하는 중입니다 ㅎㅎ

예제 만들기 위주의 영상이 아닌, 리액트의 개념들과 동작 원리부터 차근 차근 설명해주는 점이 너무 좋았어요!

그럼, 첫 번째 시간으로 Element 에 대해 알아봅시다!

 

Element

React elements는 몇가지 특징을 가진다.

• React앱의 가장 작은 구성 요소
  • 거대한 리액트라는 앱의 기초가 되는 elemen에 대해 명확히 알고 가는 것이 굉장히 중요!
  • jsx가 나타내는 것이 object이고, 이 object가 바로 element(React element)였다.
• 순수한 객체 (Plain object)
  • 브라우저 DOM element과 다르게 순수한 객체
  • { type, props }와 같은 구조로 이루어져 있음
    • type: ‘div’, ‘span’ 등
    • props: 해당 엘리먼트에 전달되는 속성들
    • 브라우저 DOM element와는 달리 React element는 순수한 JavaScript 객체이므로
    • 프레임워크의 내부에서 더 쉽게 다루고 조작할 수 있음
• 따라서 생성하는데 비용이 적게 듦

React는 React element와 DOM element가 일치하도록 DOM을 업데이트하는데, 이 업데이트는 React element를 다시 렌더링하는 것이다.

 

---

 

💡 (추가 설명) chat GPT의 대답

React가 이 과정을 수행하는 주요 역할은 다음과 같습니다:

1. Virtual DOM 비교 및 업데이트 결정: React는 이전 Virtual DOM과 새로운 Virtual DOM을 비교하여 변경된 부분을 식별합니다. 이를 통해 React는 어떤 부분을 실제 DOM에 업데이트해야 하는지 결정합니다.
2. 가상 DOM 업데이트: 변경이 필요한 부분에 대한 새로운 Virtual DOM이 생성되고, React는 이를 사용하여 Virtual DOM을 업데이트합니다.
3. 실제 DOM 업데이트: React는 최종적으로 업데이트된 Virtual DOM을 기반으로 실제 DOM을 업데이트합니다. 이때 React는 변경된 부분만을 직접 조작하여 최적화된 업데이트를 수행합니다.

이 과정을 통해 React는 성능을 향상시키고 불필요한 DOM 조작을 최소화합니다. React의 핵심 아이디어는 UI의 상태 변화에 대한 업데이트를 최적화하고, 변경이 필요한 부분만을 효율적으로 처리하여 전체 UI를 다시 렌더링하지 않는 것입니다.

 

---

 

 

처음에도 렌더링을 했을텐데.. 어떻게 돔에 다시 랜더링이 된다는 걸까?

React element를 DOM에 렌더링하기

보통 DOM이 렌더링 될 때는 브라우저가 DOM 형태로 되어있는 객체들을 html로 해석해서, html을 파싱한 뒤 렌더링하는 과정을 거친다. React element 또한 DOM element처럼 element이기 때문에 DOM element 처럼 React Element를 브라우저가 인식한다면, 즉, React Element가 DOM element에 속한다면, 브라우저가 React element를 DOM element처럼 해석해서 렌더링할 수 있음을 추론할 수 있다.

우아한 테크톡 중

React element를 DOM에 처음 렌더링하기 위해서는 아래 과정을 거친다.

1. React element들이 DOM element에 소속된다.
2. 브라우저가 소속된 React element들을 DOM element로 인식한다.
3. DOM element들은 어떻게 DOM element에 소속될까?

 

소속된다는 것이 이해가 되지 않아 GPT에게 물어보았다.

---

 

💡 Chat GPT의 대답

1. React element들이 DOM element에 소속된다: React Element는 React 애플리케이션에서 UI를 표현하는데 사용되는 가상의 "요소"입니다. 이 React Element들이 실제 DOM에 렌더링되기 전에 React 애플리케이션의 논리적 구조를 나타내기 위해 사용됩니다.
2. 브라우저가 소속된 React element들을 DOM element로 인식한다: React Element는 브라우저에서 직접적으로 인식되지 않습니다. 대신, React는 React Element를 사용하여 Virtual DOM을 구성하고 이를 기반으로 실제 DOM을 조작합니다. 브라우저는 최종적으로 업데이트된 실제 DOM을 받아와 렌더링합니다.
3. DOM element들은 어떻게 DOM element에 소속될까: React Element가 렌더링될 때, React는 이를 실제 DOM으로 변환하여 브라우저에게 전달합니다. 이때, ReactDOM.render() 메서드를 사용하여 React Element를 특정한 실제 DOM 노드에 렌더링할 수 있습니다. React Element는 이 메서드를 호출함으로써 해당 DOM에 소속됩니다.

---

 

 

그럼 React element들은 어떻게 DOM element에 소속될까?

<div id="root"></div>

React element들은 보통 이 div tag(DOM element)에 소속된다.

이름은 ‘root’ DOM node 즉, 모든 React element의 뿌리이다.

(아이디 값이 root인 DOM element이기 때문에 ‘루트 엘리먼트’라 한다.)

 

💡 다시말해, 모든 리액트 엘리먼트들은 root라는 아이디 값을 가지는 div 태그에 소속되어진다.

 

이제, 리액트 엘리먼트들이 루트 엘리먼트에 어떻게 소속되는지 알아보자.

const element = <h1>Hello, React</h1>;
ReactDOM.render(element, document.getElementById('root');

1. ReactDOM은 render라는 method를 실행시킨다.
2. 이때 arguments는 두가지
   • React element
   • 브라우저 DOM element
3. 실행 결과 React element가 DOM element에 소속된다.
   • React element가 html DOM element로 인식됨
4. 이제 DOM element로 인식된 React element가 렌더링된다.

 

그러면, 처음 렌더링이 된 다음 렌더링이 된 React Element를 어떻게 업데이트 할 수 있을까?

 

이걸 살펴보기 위해서는 굉장히 중요한 React Element의 특성을 살펴보아야 한다.

React element는 immutable하다. 즉, 변하지 않는다.

그러므로 아래 두 가지 특징을 가진다.

• element가 생성된 후에는 children과 props를 변경할 수 없다.
• 특정 시점의 UI를 나타낸다.

그러므로 React element를 업데이트하는 방법은 딱 한 가지다.

새로운 React element를 만들고, ReactDOM.render()에 넣어 실행시킨다.

아래 예시를 보자.

function tick() {
	const element = (
		<div>
			<h1>Hello, world!</h1>
			<h2>It is {new Date().toLocaleTimeString()}.</h2>
		</div>
	);
	ReactDOM.render(element, document.getElementById('root');
}

setInterval(tick, 1000);

위 코드를 실행시키면 setInterval에 의해

매 초마다 ReactDOM.render()가 실행되는 것을 확인할 수 있다.

 

💡 실제 대부분 React app은 ReactDOM.render()를 한 번만 실행시킨다.

React element의 달라진 부분만 업데이트

만약 ReactDOM.render()이 실행될 때마다

root DOM node에 소속된 모든 React element들이 다시 렌더링 된다면 너무 비효율적이다.

ReactDOM은 React element의 달라진 부분만 업데이트한다.

function tick() {
	const element = (
		<div>
			<h1>Hello, world!</h1>
			**<h2>It is {new Date().toLocaleTimeString()}.</h2>**
		</div>
	);
	ReactDOM.render(element, document.getElementById('root');
}

setInterval(tick, 1000);

render라는 메소드는 리액트 엘리먼트 전체 중에서 특정 달라진 부분을 체크하고 그 부분만 업데이트하는 기능을 가지고 있다.

위 예제 코드를 실행시키면

하이라이팅 된 h2 tag의 text node(달라진 부분)만 업데이트되는 걸 확인할 수 있다.

 

💡 UI(React element)가 매 순간 어떻게 보여야 할 지를 고민하자. 앞으로 어떻게 변화할지를 미리 고민하지 말고!

 

위에서 ReactDOM.render()가 보통 한 번만 실행된다고 했던 것이 기억나는가?

다음 시간엔 어떻게 한 번만 실행될 수 있는지 그 원리를

상태를 가진 component(stateful componenet)와 그것을 구성하는 방법인

encapsulated element에 대해 살펴보자.