Ray`s Tech Lab

개발을 하다가 컴포넌트가 렌더링될 때 2번 렌더링되는 현상을 목격했다. 사실 이전에 다른 플젝을 할 때도 렌더링이 두 번되는 경우를 종종 봤었는데(useEffect로 예약걸어둔 함수가 두 번 실행되는..) 이번에 이게 왜 이러지 라는 생각이 들어서 알아봤다.

일단 결론부터 말하자면, index.js에서 React.StrictMode가 쓰여서 그렇다. 때문에 StrictMode가 적용된 걸 주석처리해주면 2번 렌더링되는 현상을 해결할 수 있다.

https://ko.reactjs.org/docs/strict-mode.html#gatsby-focus-wrapper

이 놈은 개발모드에서만 활성화되는 녀석으로 UI적인 렌더링은 없고, 자식들에 대한 부가적인 검사와 경고를 활성화하는 것을 통해 개발에 도움을 주는 모드라고 한다. 

위 공식문서에 쓰여있다시피, StrictMode가 적용돼있으면 두 번 렌더링을 하여 생명주기 메소드들과 관련된 쉽게 오류들을 찾을 수 있게끔 도와주는거라고 한다.

한마디로 두 번 렌더링되는 건 내가 오류없이 잘 코딩하고 있다면 문제될 얘기가 아니라는 뜻인 듯.

리액트는 state와 props를 통해 데이터마다 다른 화면을 보여줄 수 있었다. 이번엔 state가 바뀔 때마다 리액트가 렌더링하는 방식을 살펴보겠다.

우선 결론적으로 말하자면, state가 바뀔 때마다 그 state를 갖고 있는 컴포넌트 자체를 새로 렌더링한다. 즉 그 컴포넌트를 통째로 화면에  다시그린다는 것. 이 때 쉽게 생각할 수 있는 문제점은 "아니 그럼 컴포넌트를 통째로 다시 그린다면 컴포넌트 내에서 안 바뀌는 부분도 다시 그린다는 건데 이건 좀 낭비 아냐?"이다.

이런 문제를 해결하기 위해, React에선 Virtual DOM(가상 돔)이란 것을 활용한다. 리액트 내에서 DOM Tree를 본따서 만든 것인데, 이를 통해 Element를 새로 렌더링할 때 실제 DOM Tree에 바로 반영하는 게 아니라 일단은 Virtual DOM에 적용한다. 이후 state 변경 전의 Virtual DOM과 변경 후의 Virtual DOM을 비교해, 실제로 바뀐 부분만 찾아낸 다음에 비로소 그 부분들만 실제 DOM Tree에 적용한다. 똑똑하게도 바로 화면을 바꾸는 게 아니라 화면을 바꿀 준비를 하고 어디어디가 바뀌는지 파악한 다음 그 때 바꾸는 것.

이런 방식으로 렌더링하는 것은 크게 2가지의 좋은 점이 있다.

1. 개발자가 직접 DOM을 신경쓸 필요가 없으니 단순하고 깔끔한 코드를 작성할 수 있다는 것. 무슨 데이터를 어떻게 보여줄 지만 신경쓰면 된다.

2. 변경사항들을 리액트가 적당히 모아 처리할 수 있다는 것. 브라우저의 한정적인 자원을 효율적으로 이용할 수 있다는 것이다.

참고로 이 Vitrual DOM은 리액트에만 있는 개념은 아니다. 그냥 여기선 Virtual DOM을 사용하면 효율적인 화면 처리가 가능하다는 것만 알아두면 될 것 같다.