React 핵심 작동 원리
입사 후 React를 꾸준히 사용하고 있습니다. 그래서 무척 친숙합니다.
다만 React를 진짜 깊이 있게 이해하는가 물어본다면 맞다고 답하기 어렵습니다.
React는 최소한 잘 아는 개발자가 되고 싶기 때문에
React가 어떤 존재인지, 세부 핵심 원리는 무엇인지 정리해보려 합니다.
리액트란
사용자 인터페이스를 만들기 위한 javascript 라이브러리
공식문서에 위와 같이 정의되어 있습니다.
프론트엔드 개발자의 업무 자체를 지칭하는 것으로 느껴질 만큼 클라이언트단 라이브러리의 대표주자가 되었네요.
리액트의 실체
“리액트 = 빠르다”는 잘못된 미신이다. 유지보수가능한 어플리케이션을 만드는 것을 도와주고, 대부분의 경우에 “충분히 빠르다”
- Redux 창시자 Dan Abramov -
많은 사람들이 쓰는 리액트, 빠르고 새롭게 발전하는 기술 속에서 처음 느꼈던 혁명적인 장점들은 희미해지고 단점들이 부각되고 있습니다.
특히 과거 리액트의 개념을 대표하던 가상돔은
과거 전면에 내세웠던 것과 달리 공식문서에서 사라지게 되었죠.
가상돔에 대한 기대도 이름도 안녕
단순하게 이해할 때는, 가상돔이 최소한의 사항을 업데이트 하기 때문에 React를 사용하면 절대적인 성능 향상이 이루어진다 생각했습니다.
그러나 실제 가상돔은 가상돔을 만들고, 비교하고, 실제 돔에 적용하는 비용이 들고 실제 DOM을 변경하는 방식이 더 효율적일 때도 존재한다는 것을 이해했습니다.
DOM보다 절대적으로 빠른 것이 아닌, 사용자가 사용하기 충분히 빠르다는 점을 이해했습니다.
과거 저와 같이 사람들이 많은가 봅니다.
DOM이 문제가 있어 virtual DOM을 만들었단 오해를 해소하기 위해 virtual DOM이라는 명칭을 사용하지 않길 권고한다고 하네요.
그럼 React는 왜쓸까
리엑트를 가장 큰 장점은 아주 잘 형성되어 있는 커뮤니티입니다.
리엑트는 단점도 있지만, 잘 쓴다면 좋은 도구가 될 수 있습니다. 그런 점에서 커뮤니티가 잘 쓸 수 있도록 많은 도움을 주죠. 선생님과 동료가 주변에 가득한 만큼 든든한 것은 없습니다.
잘써야 한다
모든 기술이 그러하겠지만, 그것을 쓰는 것 만으로는 의미가 없습니다. 그 기술의 내면을 이해하고 잘 쓸 줄 알아야합니다.
그런 점에서 리엑트를 리액트의 핵심 가상돔과, 렌더링의 원리를 이해해야 진짜 잘 쓸 수 있다고 생각합니다.
가상돔 원리
DOM
DOM의 노드를 건들면 리플로우 리페인트가 발생합니다. 변경 건수가 많아질 수록 프로세스의 부하가 생깁니다. 이는 큰 페이지와 역동적인 UI를 다루는 것에는 효율적이지 않습니다.
Virtual DOM
가상돔은 DOM의 가벼운 복사본으로 in-memory에 존재하기 때문에 렌더링 과정이 생략되어 연산비용이 적습니다.
- 새 요소가 UI에 추가되면 virtual DOM이 작성됩니다.
- 변화가 생기면 변경이 적용된 virtual DOM이 작성됩니다.
- 이 둘을 비교하는 diffing 과정을 통해 변경된 객체를 선별하여 실제 돔에 업데이트하는 재조정이 일어납니다.
여기서 문제는 리액트는 컴포넌트 내부 상태값과 외부값 중 하나가 변경되면 함수 컴포넌트 전체를 다시 호출합니다. 예로, 부모 컴포넌트가 변하면 자식 컴포넌트도 다시 업데이트가 됩니다.
따라서 이를 useMemo, useCallback, memo를 통해 의존성 외에는 리랜더링 하지 않도록 해주는 것이 중요 합니다.
Fiber
기존 stack reconcilation은 react 컴포넌트들이 점점 복잡해지기 시작했고, 중요한 정보가 프레임 드랍이 될 수 있다는 문제를 가지고 있었습니다.
따라서 등장한 것이 Fiber reconcilation 알고리즘입니다.
Fiber는 state, effect 업데이트에 대한 정보까지 함께 담고 있는 렌더링 단위입니다.
- 렌더링, Hook 로직이 실행되면서 fiber 노드 객체에 기록이 쌓입니다.
- useTransition을 통해 urgent 렌더링과 transition 렌더링 분리하여 인식하여 스캐줄러에 개입하여 렌더링 병목을 해결할 수 있는 훅입니다.
- useTransition은 동기적인 동작이고, 반영 전 예약이 되는 React 원리를 활용해 스케줄을 하는 것입니다.
마무리
React에 대해 전반적인 지식을 정리하는 시간을 가질 수 있었습니다.
그리고 남의 시선이 아닌, 제 시선으로 React가 무엇일까 고민해볼 수 있는 시간이었습니다. 추후에 깊이 있는 원리를 개별적으로 정리해보면 좋겠단 생각을 했습니다.
React야 고마웠고, 또 만나자!
참고
React를 버려야하는 이유
Virtual DOM 을 왜 빠르다고 하는가
virtual dom이 뭐가 좋은가?
리액트의 동작 원리와 성능 개선
Fiber 아키텍처의 개념과 Fiber Reconcilation 이해하기
