1.7 KiB
1.7 KiB
title, category, tags, created
| title | category | tags | created | ||||
|---|---|---|---|---|---|---|---|
| 리액트 핵심 멘탈 모델 (UI as a Function of State) | Software Architecture |
|
2026-04-20 |
React_Mental_Model (리액트 멘탈 모델)
📌 한 줄 통찰 (The Karpathy Summary)
리액트 개발은 DOM을 '조작(Manipulate)'하는 것이 아니라, 데이터의 흐름인 '상태(State)'를 정의하고 그 결과물을 화면에 '선언(Declare)'하는 과정이다.
📖 구조화된 지식 (Synthesized Content)
- UI = f(State):
- 화면은 상태의 결과값이어야 한다. 명령형(Imperative)으로 "이 버튼의 글자를 바꿔라"라고 하는 순간 리액트의 질서는 무너진다. 오직 상태를 바꾸고 리액트가 알아서 그리게 하라.
- Immutability (불변성):
- 리액트는 객체의 주소값이 변할 때만 렌더링을 시도한다.
arr.push(1)이 아니라setArr([...arr, 1])처럼 새로운 원본을 복제하여 가상 DOM(Virtual DOM)이 효율적으로 동작하게 돕는다.
- 리액트는 객체의 주소값이 변할 때만 렌더링을 시도한다.
- Virtual DOM Diffing:
- 리액트는 실제 DOM을 직접 건드리기 전에 메모리상의 가상 DOM에서 이전 상태와 비교(Diffing)하여, 꼭 필요한 부분만 실제 화면에 반영(Commit)한다. 이것이 고성능 웹의 비결이다.
⚠️ 모순 및 업데이트 (RL Update)
- 불변성 유지를 위해 매번 거대한 객체를 복사하는 것은 때로 손해다.
Immer같은 라이브러리를 쓰거나, 상태의 크기를 작게 쪼개어(Normalization) 업데이트 비용을 최소화하는 전략이 중급 개발자의 역량이다.
🔗 지식 연결 (Graph)
- Related: React_Hooks_Deep_Dive , Component_Design_Patterns
- Foundation: System_Protocol_Standard