✅배경지식 Check!
⚠ DOM과 Virtual DOM에 대해 알아야함.
아직 위 내용을 알지 못한다면, 이 포스팅 을 읽어보자!
리액트는 어떻게 동작할까?
리액트를 이용하여 개발을 하면서 내가 의도하는 바가 코드에 적절히 적용되었는지를 알기 위해서는 사용하는 훅이나 메소드, 직접 만든 함수들의 로직을 살펴보는것도 중요하지만 리액트 자체를 이해하는 것이 매우 중요하다.
리액트가 어떤식으로 우리가 작성한 코드를 동작하게 하는 지 세 단계에 걸쳐 알아보도록 하자.
1. Trigger Phase
Trigger란, 방아쇠란 의미의 단어이다. 이 방아쇠가 총알을 쏘기 위함이 아니라 어떤 현상이나 상황을 이끌어내기 위한 조건이라고 생각해보자.
그렇다면, 리액트에서 렌더링을 일으키는 Trigger(방아쇠) 는 무엇인가?
- 상태의 변화
- props의 생성 및 변화
그렇지만, 한 가지 간과하고 있는 사실은 우리가 처음에 앱을 화면에 렌더링 할 때도 하나의 트리거가 된다는 점이다.
즉, 정리해보면
- 앱이 시작되는 순간
- 상태의 변화
- props의 생성 및 변화
이러한 이유들로 리액트는 리렌더링을 일으키고 화면을 새로 그리게 된다.
그렇기 때문에 일부러 리렌더링을 일으키고 싶다면, state를 업데이트하는 setState를 사용해주면 된다.
이러한 사실을 알고 특정 상황에서 일부러 리렌더링을 일으키기 위해 사용되지 않는 상태값을 업데이트 하는 방법도 있다.
2. Render Phase
첫번째 단계인 트리거 단계를 지나면 렌더 단계가 되는 것은 자명하다.
렌더링을 일으키는 조건, 그것이 트리거니까...
렌더링이라는 것은 리액트가 화면에 표시할 컴포넌트를 호출하는 것이다.
보통 렌더링은 화면에 컴포넌트를 그려서 반영하는 과정으로 알고 있겠지만 그것은 브라우저 렌더링이라 부르고
여기서는 렌더링을 화면에 표시할 컴포넌트를 호출하는 작업으로만 명시하고자 한다.
우리는 원하는 화면을 만들기 위해 많은 컴포넌트들로 이루어진 코드를 작성했을것이고, 리액트도 이 사실을 이미 알고있다.
그렇기 때문에 리액트는 자식을 가진 컴포넌트들의 끝에 끝까지 파고들어 자신이 어떤걸 화면에 표시해야 할지 이해하는 작업을 재귀적으로 수행한다.
다만, 여기서 주의할 점은 처음에 초기 렌더링을 하는 순간에는 이 작업을 모든 컴포넌트에 대해 전체적으로 수행하지만
그 이후의 렌더링 부터는 이전 렌더링으로부터 변경된 내용이 있는지 계산하여 변경점이 있는 컴포넌트, 즉 렌더링을 트리거한 컴포넌트 만을 계산하여 호출한다.
여기서 오해하지 말아야 하는 부분이 있는데, 현재 단계에서는 이러한 컴포넌트들을 호출하고 계산만 할 뿐 아직 아무 작업도 수행하지 않는다.
즉, 아직 화면에 계산해낸 것을 DOM에 반영하는 단계가 아니다!
3. Commit Phase
초기 렌더링에서는 전 단계인 렌더 단계에서 호출된 모든 컴포넌트들을 DOM 노드에 배치하게 된다.
그렇지만, 이후의 리렌더링 부터는 이전 단계에서 계산한 차이점이 발견된 경우에만 DOM 노드를 변경하게 된다.
이와 관련되어 Virtual DOM에 대해 다룬 포스팅 을 보면 더 이해가 쉬울 것이다.
자세한 내용은 위 포스팅에 담겨있으므로 여기서는 단지 초기 렌더링에서는 모든 컴포넌트를 DOM 노드에 배치하고 리렌더링 부터는 차이점이 발견된 경우만 DOM 노드를 변경한다는 것만 알아두자.
4. 마무리
위의 단계를 모두 거치고나서 이제는 정말 화면에 다시 그리는 작업을 하게 된다.
이 과정을 페인팅 이라고 부르고, 공식문서에서 딱히 단계로 분류해놓지 않았기에 여기서도 마무리 작업으로만 인식하면 좋을 듯 하다.
요약
리액트가 동작하는 과정
1. Trigger Phase (렌더링을 유발하는 조건이 발동됨)
2. Render Phase (렌더링이 동작함, 여기서의 렌더링은 브라우저 렌더링과 다르므로 주의!!)
3. Commit Phase (렌더 단계에서 호출된 컴포넌트를 DOM에 배치 Or 차이점이 발생한 컴포넌트만 DOM에 배치)
여기까지를 거치면 우리는 리액트가 어떤방식으로 동작하는지 이해하게 된 것이다.
보다 자세한 내용과 이해하기 쉽게 제시된 예제를 함께 보고자 한다면 출처에 작성한 리액트의 공식 문서를 반드시 살펴보길 권장한다.
끝-
출처
React 공식 문서
