렌더 트랙 - React
백엔드 전환자가 React를 이해할 때, 무엇을 해결하는지 중심으로 정리합니다.
React가 다루는 문제 4가지
1) 상태 변경과 화면 반영의 간극
백엔드에서는 변경 후 바로 결과가 반환된다는 감각이 익숙합니다. React에서는 변경 후 화면이 반영되기까지 “렌더 계산”과 “DOM 반영” 단계를 거칩니다.
React는 이 간극을 한 번의 규칙으로 묶어, 화면 반영 흐름을 추적 가능한 형태로 제공합니다.
2) 화면의 기준점이 분산되는 문제
UI가 여러 컴포넌트에서 바뀌면, 화면이 어느 값에서 유래했는지 분산될 수 있습니다. React는 상태를 중심으로 뷰를 구성해, 화면의 출처를 정리하기 쉽게 만듭니다.
3) 이벤트/비동기의 경합
사용자 입력, 타이머, 네트워크 응답이 겹치면 “어떤 값이 최신인가”가 흐려집니다. React는 상태 계산 경로를 하나의 재렌더 흐름 안에 두어, 순서와 반영 시점을 다루기 쉽게 만듭니다.
4) 컴포넌트 생애주기와 정합성
컴포넌트는 생기고 사라집니다.
이때 이벤트 바인딩, 타이머, 구독 같은 외부 연계는 정합성이 깨지기 쉬운 지점입니다.
React는 마운트/언마운트 기반으로 이 부분을 모델링하게 해 줍니다.
백엔드 사고로 보는 React의 입문 포인트
React를 떠올릴 때 아래 대응으로 시작하면 빠릅니다.
- 상태는 화면의 입력이다.
- 렌더는 상태를 화면 트리로 바꾸는 계산이다.
- 커밋은 바뀐 트리를 실제 DOM에 반영하는 단계이다.
즉, “요청을 받아 값 하나를 반환하는 API 함수”를 생각하던 방식과 달리, React에서는 “상태가 다음 화면을 만드는 계산기”로 봅니다.
이 문서를 끝내며
철학 파트에서 React의 등장 배경을 읽었다면, 이제는 이 문서로
어떤 문제를 React가 대신 정리해주는지 감을 잡으시면 됩니다.
library/react.mdx는 문법 암기용이 아니라 React 모델의 핵심 감각을 잡는 입문 문서입니다.
뒤의 React 트랙은 그 모델을 구체 구현으로 확장합니다.