[Korean FE Article] 블로그 답변: React 렌더링 동작에 대한 (거의) 완벽한 가이드

글 링크: https://velog.io/@superlipbalm/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior

소개

평소 리액트의 렌더링 과정이 궁금하시거나, 조금 헷갈리는 점들이 있으시다면 이 글을 읽어보시는 것을 추천드립니다. 리액트 렌더링이 무엇인지, 어떻게 동작하는지 등 렌더링에 대한 전반적인 내용을 세세하게 다루고 있어 궁금함을 해소 하시는데 도움이 되실 겁니다. :)

목차

• 렌더링이 뭘까요?

  • 렌더링 프로세스 개요

  • 렌더 및 커밋 단계

• 리액트는 어떤 방식으로 렌더링할까요?

  • 렌더링 큐에 렌더링 등록하기

  • 일반적인 렌더링 동작

  • 리액트 렌더링 규칙

  • 컴포넌트 메타데이터와 파이버(Fibers)

  • 컴포넌트 타입(Component Types)과 재조정(Reconciliation)

  • Key와 재조정

  • 렌더링 일괄 처리(Render Batching)와 타이밍

  • 비동기 렌더링, 클로저 그리고 상태 스냅샷

  • 렌더링 동작 엣지 케이스

• 렌더링 성능 개선

  • 컴포넌트 렌더링 최적화 기법

  • Props 참조가 렌더링 최적화에 미치는 영향

  • Props 참조 최적화

  • 전부 메모이제이션할까요?

  • 불변성(Immutability)과 리렌더링

  • 리액트 컴포넌트 렌더링 성능 측정

• 컨텍스트(Context)와 렌더링 동작

  • 컨텍스트 기초

  • 컨텍스트 값 업데이트

  • 상태 업데이트, 컨텍스트 그리고 리렌더링

  • 컨텍스트 업데이트와 렌더링 최적화

  • 컨텍스트와 렌더러 경계(Renderer Boundaries)

• React-Redux와 렌더링 동작

  • React-Redux 구독(Subscriptions)

  • `connect`와 `useSelector`의 차이

• 리액트의 향후 개선 사항

  • "React Forget" 메모이징 컴파일러

  • Context Selectors

• 요약

• 결론

• 추가정보