개요

velog 뿐만 아니라 구글에 'React 동작 원리'를 검색하면

정말 무수한 정리글이 쏟아져나옵니다.

다만 이 지식을 온전한 저의 말로 정리하기 위해 포스팅합니다.

What is React?

React는 facebook에서 제공하는 프론트엔드 라이브러리입니다.

Component 기반으로 UI를 작성하는 데,

저는 이것을 UI 퍼즐이라고 칭하곤 합니다.

위처럼 여러 컴포넌트를 조립해 하나의 페이지를 완성하는 것입니다.

또한 Props, State의 개념 및 JavaScript의 확장인 jsx 문법을 사용합니다.

특징들은 따로 포스팅한 것이 있으니 생략합니다.

How react works?

설명에 앞서 DOM을 잠깐 짚고 넘어갑니다.

DOM

DOM(Document Object Model)은 HTML, XML 문서의 인터페이스입니다.

수 많은 서비스에 사용되어왔지만, 사실 이러한 Tree 구조는 동적인 연산에 취약합니다.

예를 들어 a태그에 있는 attribute를 변경하고 싶다면

html -> body -> a -> href

로 순회하여 속성을 찾아 변경하게 되는데,

웹 서비스를 구현하다보면 이러한 연산이 무수하기에 시간적으로 매우 비효율적입니다.

React가 동작하는 방식은 바로 이 부분을 Virtual DOM으로 치환하는 것에 있습니다.

Virtual DOM

바로 볼펜으로 그릴래, 아니면 연필로 그리고 덧씌울래?

비유는 약간(?) 적절치 않을지도 모르지만, 제가 느낀 감상입니다.

예를 들어 처음부터 볼펜으로 그림을 그리다가 무언가 맘에 안드는 게 있다면

쓰던 도화지는 무용지물이 되어버리고, 새 도화지를 꺼내야합니다.

하지만 연필은 새 도화지를 꺼낼 필요가 없습니다.

React는 수정이 있을 때 즉시 DOM에 적용하지 않습니다.

상태 변화가 발생하면, Diffing 알고리즘을 통해 기존 DOM과 비교합니다.

Diffing Algorithm
1. 상위 element가 변경되면, 하위 element는 그대로더라도 새로 덧씌운다.
2. element는 같지만 속성만 다르다면 속성만 변경하고 DOM은 건드리지 않는다.
3. 하위 요소가 추가되는 경우.

3번에 대해서는 2가지의 분기가 있습니다.

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
<ul>

예를 들면 위의 list에

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
<ul>

위와 같이 4가 추가되는 경우.

React는 1,2,3까지는 같은데 4는 없는거네! 라고 인지하며 해당 요소만 추가합니다.

반대로

<ul>
  <li>4</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
<ul>

이렇게 4가 맨 위에 있는 경우, 기존의 1과 다르므로 DOM을 전부 업데이트하게 됩니다.

이런 현상을 해결하는 것이 'key' 입니다.

<ul>
  <li key=`${id1}`>1</li>
  <li key=`${id2}`>2</li>
  <li key=`${id3}`>3</li>
  <li key=`${id4}`>4</li>
<ul>

이렇게 키를 설정해주면 React는 이미 있던 것과 없었던 것을 잘 구별하여 업데이트할 요소만 갱신하게 됩니다.

참고 링크 : https://dj-min43.medium.com/%EB%A6%AC%EC%95%A1%ED%8A%B8-virtual-dom-%EA%B0%80%EC%83%81%EB%8F%94-%EB%B2%84%EC%B6%94%EC%96%BC%EB%8F%94-%EC%9D%B4%EB%9E%80-359c28112048

마무리

결론적으로 React는 위와 같은 방식으로 DOM을 업데이트하기 때문에

동적인 변화에 대해 효율적으로 처리할 수 있는 라이브러리입니다.

어쩌면 왜 React를 사용하는가? 에 대한 어떠한 답인 것 같습니다.