해당 내용은 https://www.udemy.com/course/best-react/ 강의를 들으며 정리하고 스스로 공부 한 내용을 기록 하였습니다.

Section 6. How Does React Work?

About Component

먼저 리액트는 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리 임을 잊지 말자.

리액트의 핵심은 컴포넌트.
리액트는 컴포넌트를 통해 사용자 인터페이스를 효과적으로 구성하며 이에 대한 업데이트도 컴포넌트를 통해 한다.

리액트 DOM은 웹에 대한 인터페이스다. 리액트는 웹(브라우저) 와는 전혀 관계가 없다. 어떻게 컴포넌트를 다루는지는 알고 있지만 실제 HTML요소들을 화면에 표시해주는 것은 리액트 DOM이 고려한다.
→ 리액트는 단지 컴포넌트를 관리하고 상태 객체 관리 및 다른 객체의 상태와 컴포넌트가 바뀌어야 하는지 확인, 컴포넌트의 변경 전 후 상태를 확인하는 라이브러리 일 뿐.

리액트는 변경된 내용과 어떤 화면이든간에 화면에 표시 되어야 할 정보 모두를 현재 사용중인 인터페이스 (리액트 DOM)에 전달한다.
리액트 DOM은 브라우저의 일부인 실제 DOM에 대한 작업을 하므로 사용자가 보고 있는 화면에 무언가를 표시하는 역할을 한다.

리액트는 props를 관리한다. props는 컴포넌트에 전달하는 데이터로 컴포넌트 구성을 가능하게 해주고 부모-자식 컴포넌트 간의 통신을 연결해준다.
또한 컴포넌트 내부 데이터인 상태 라는 것을 다루며 전체의 데이터인 컨텍스트를 다룬다.
이 외에도 다른 내장 기능들이 있지만, 핵심은 이와 같다.

props, 상태 또는 컨텍스트가 변경 되면 이런 것들을 사용하는 컴포넌트 역시 리액트를 변경되고 리액트는 이 컴포넌트가 화면에 새로운 것을 표시하는지에 대해 확인한다.

화면에 뭔가를 그리려 한다면 리액트는 리액트DOM에게 이를 알려 리액트 DOM이 새로운 화면과 새로운 컴포넌트 그리고 새 출력을 표시할 수 있게 한다.

리액트의 역할은 컴포넌트를 다루며 가상 DOM 이라는 개념을 사용하는 것이다.
가상 DOM은 앱이 마지막에 만들어내는 컴포넌트 트리를 결정하는데, 각각 하위 트리를 갖고있는 컴포넌트들은 JSX코드를 반환하는데 이 가상 DOM은 컴포넌트 트리의 현재 모양과 최종 모양을 정한다.

가령, 상태가 업데이트 되면 이 정보는 리액트 DOM으로 전달되어 갱신 전 후 의 상태 차이를 인식하고 리액트가 컴포넌트 트리를 통해 구성한 가상 스냅샷인 가상 DOM과 일치하도록 실제 DOM을 조작 하는 방법을 알 수 있게 한다.

리액트는 상태나 props, 컨텍스트, 컴포넌트에 변경이 발생하면 컴포넌트 함수가 재 실행 되어 이를 재평가 하지만 이는 DOM을 다시 렌더링 하는 것은 아니다.
즉, 리액트에 의해 컴포넌트 함수가 재실행 된다고 해서 실제 DOM의 각 부분들이 다시 렌더링 되거나 재평가 되는 것은 아니다.

컴포넌트, 리액트, 실제DOM의 역할을 구분해야한다.

• 컴포넌트: 상태, props, context가 변경될 때 재평가
• 리액트: 컴포넌트 재평가 → 컴포넌트 함수 다시 실행
• 실제 DOM: 리액트가 구성한 컴포넌트의 이전 상태와 트리, 그리고 현재 상태간의 차이점을 기반으로 변경이 필요할 때만 업데이트 → 실제 DOM은 필요한 경우에만 변경

이는 성능 측면에서 매우 중요한데 이전과 현재 상태를 가상으로 비교한다는 것은 메모리 안 에서만 발생하기 때문에 간편하고 자원도 적게 든다.

만약 실제 DOM을 사용하게 된다며 브라우저에 직접 렌더링 하는 것은 성능 측면에서 자원이 많이 필요하게 된다. 실제 DOM을 사용 하는 작업은 성능 부하가 많이 발생하기 때문이다.

💡 이렇게 리액트는 가상 DOM과의 비교를 통해 최종 스냅샷과 현재의 스냅샷을 실제 DOM에 전달하는 구조를 갖는다. (가상 DOM을 통해 2개의 스냅샷 간의 차이점을 알아냄)

About Child Component

컴포넌트가 재실행되면 이 컴포넌트의 의 모든 자식 컴포넌트들 역시 재실행, 재평가된다.

간단한 App 컴포넌트여도 즉, 더 이상의 하위 컴포넌트가 없는 두 개의 자식 컴포넌트만 있는 루트 컴포넌트에서 또 다른 자식 컴포넌트가 있다면 그 컴포넌트 역시 재평가된다.

정리하자면 연결된 모든 컴포넌트 함수가 재실행되면 굉장히 많은 함수가 가상 비교가 된다는 것인데 성능에 영향을 미치지는 않을까 하는 의구심이 생긴다.

출력 결과가 바뀌는 것이 없음에도 불구하고 모든 자식 컴포넌트를 재실행하는 것은 낭비가 맞다.

그렇다면 이에대해 불필요한 재평가를 어떻게 방지하면 좋을까.