[React] - [처음 만난 리액트] - 13. Elements의 특징 및 렌더링 하기

🧹 두서없이 적는 쉬운 정리

1. Elements는 한번 생성되면 변하지 않는다는 불변성을 가지고 있다.

2. 다른 말로 엘리먼트 생성 후에는 children이나 attributes를 바꿀 수 없다는 말

4. 엘리먼트를 생성한 이후에 실제로 화면에 보여주기 위해서는 렌더링이라는 과정을 거쳐야 한다

5. 리액트로만 만들어진 모든 웹사이트들은 단 하나의 Root DOM Node를 가지게 된다

6. 렌더링을 위해 ReactDOM에 render()라는 함수를 사용

7. 이 함수는 '첫번째 파라미터인 리액트 엘리먼트'를 '두 번째 파라미터인 html 엘리먼트'에 (즉 DOM 엘리먼트) 렌더링 하는 역할

8. 결국 리액트 엘리먼트가 렌더링 되는 과정은 Virtual DOM에서 실제 DOM으로 이동하는 과정

9. 한 번 렌더링된 엘리먼트를 업데이트하려면 새로 만들어야 한다 (새로 만든 것으로 바꿔치기)

10. 최종적으로 리엑트 엘리먼트는 불변성 때문에 엘리먼트를 업데이트하기 위해서는 새로 만들어야 한다

 

(자세한 내용은 아래 참고)

 

---

 

📖 Elements의 특징

엘리먼트는 굉장히 중요한 특징인 불변성을 가지고 있다. 

리액트 Elements는 immutable (im + mutable)란 특징을 갖고 있습니다

 

mutable 영어 단어는 변할 수 있는 이라는 뜻이고

여기에 부정의 의미를 가진 im을 앞에 붙이면 변경할 수 없는 불변의 라는 뜻을 가진 단어 immutable이 된다.

 

즉 엘리먼트가 불변성을 갖고 있다는 것은 한번 생성된 엘리먼트는 변하지 않는다는 것이다.

 

다른 말로 표현하면 엘리먼트 생성 후에는 children이나 attributes를 바꿀 수 없다는 말이다.

 

근데.. 리액트 엘리먼트는 우리 눈에 보이는 것을 기술하는

엘리먼트가 변할 수 없다면 화면 갱신이 안 되는 것 아닌가?

 

위에서 중요한 부분은 바로 엘리먼트 생성 후에는이라는 부분이다.

즉 엘리먼트는 다양한 모습으로 존재할 수 있지만 한번 생성된 다음에는 변경 이 불가능하다는 뜻이다.

 

붕어빵 가게에 가면 붕어빵 틀에 반죽을 넣고 붕어빵이 구워져 나오는데

완성된 붕어빵에 속 내용은 바꿀 수 없는 것과 같은 이치라고 생각하면 된다.

 

이 그림은 리액트 컴포넌트와 엘리먼트의 관계를 붕어빵 그림으로 나타낸다.

 

쉽게 말해 [컴포넌트 = 붕어빵 틀, 엘리먼트 = 생성된 붕어빵]

 

그렇다면 화면에 변경된 엘리먼트들을 보여주기 위해서

기존 엘리먼트를 변경하는 것이 아닌 새로운 엘리먼트를 만들어야 한다.

(새로운 엘리먼트를 만들어 기존 엘리먼트와 바꿔치기하는 것)

 

앞에서 리액트에 장점 중 하나로 빠른 랜더링 속도가 있다는 것을 언급했다

그리고 이를 위해서 내부적으로 Virtual DOM이라는 것을 사용한다고 했다.

위 개념도를 다시 한번 보도록 하자.

 

이 그림에서 보이는 것처럼 화면에 새로운 내용을 보여주기 위해

Virtual DOM은 변경된 부분을 계산 Compute Diff 하고 해당 부분만을 다시 랜더링(Re-render)한다.

(동그란 각 원들이 바로 엘리먼트) 빨간색으로 표시된 원들은 변경된 엘리먼트들이다.

 

엘리먼트는 불변성을 갖고 있기 때문에 화면에 새로운 내용을 보여주기 위해서

새로운 엘리먼트를 만들어 기존 엘리먼트가 연결되어 있는 부분에 바꿔서 달면 된다.

 

---

🤺 Elements 렌더링 하기

엘리먼트를 생성한 이후에 실제로 화면에 보여주기 위해서는 렌더링이라는 과정을 거쳐야 한다

 

자 먼저 간단한 html 코드를 보자 이 html 코드는 'root'라는 아이디를 가진 <div> 태그이다

굉장히 단순하지만 이 코드는 모든 리액트에 필수적으로 들어가는 아주 중요한 코드이다.

 

실제로 이 <div> 태그 안에 리액트 엘리먼트들이 렌더링 되고 이것을 Root DOM Node라고 부른다.

이 <div> 태그 안에 있는 모든 것이 리액트 DOM에 의해서 관리되기 때문이다.

 

리액트로만 만들어진 모든 웹사이트들은 단 하나의 Root DOM Node를 가지게 된다

반면 기존에 있던 웹사이트에 추가적으로 리액트를 연동하게 되면

여러 개의 분리된 수많은 Root DOM Node를 가질 수도 있다.

 

'root' <div>의 실제로 리액트 엘리먼트를 랜더링 하기 위해서는 다음과 같은 코드를 사용한다.

이 코드는 먼저 엘리먼트를 하나 생성하고 생성된 엘리먼트를 'root' <div>에 렌더링 하는 코드이다.

렌더링을 위해 ReactDOM에 render()라는 함수를 사용하게 된다.

 

이 함수는 '첫 번째 파라미터인 리액트 엘리먼트'를 '두 번째 파라미터인 html 엘리먼트'에 (즉 DOM 엘리먼트) 렌더링 하는 역할을 한다.

 

여기서 다시 한번 리액터 엘리먼트와 톰 엘리먼트는 다른 개념이라는 것을 유의하자

 

리엑터 엘리먼트 : 리액트 Virtual DOM 존재하는 것

DOM 엘리먼트 : 실제 브라우저 DOM에 존재하는 것

 

결국 리액트 엘리먼트가 렌더링 되는 과정은 Virtual DOM에서 실제 DOM으로 이동하는 과정

 

한 번 렌더링 된 엘리먼트를 업데이트하려면 어떻게 해야 할까?

 

엘리먼트에 중요한 특징인 불변성은  한번 생성되면 바꿀 수 없다는 뜻이기 때문에

엘리먼트를 업데이트하기 위해서는 다시 생성해야 한다.

 

---

🧑🏻‍💻 예제 코드

이 코드에서는 tick() 이라는 함수를 정의하고 있다.

tick() 함수는 현재 시간을 포함하고 있는 엘리먼트를 생성하여 'root' <div>에렌더링하는 역할을 한다.

그리고 자바스크립트의 setInterval() 함수를 사용해서 tick() 함수를 1초(1000)마다 호출하고 있다.

 

📺 결과

화면에 새로운 시간이 나온다

tick() 함수가 호출될 때마다 기존 엘리먼트를 변경하는 것이 아니라 새로운 엘리먼트를 생성해서 바꿔치기하는 것.

 

이 그림처럼 크롬의 개발자 도구를 통해서 보게 되면 갱신되는 부분만 반짝이는 효과가 나타나게 된다.

매초 새로운 엘리먼트가 생성되어 기존 엘리먼트와 교체되면서 내용이 변경되고 변경된 부분에 반짝이는 효과가 나타나는 것이다.

 

[중요] 리엑트 엘리먼트 불변성 때문에 엘리먼트를 업데이트하기 위해서는 새로 만들어야 한다

 

 

 

 

 

 

 

 

위 내용은 '소플' 님의 '처음 만난 리액트' 영상을 참고하여 작성되었습니다.