27 lines
1.7 KiB
Markdown
27 lines
1.7 KiB
Markdown
---
|
|
title: 리액트 핵심 멘탈 모델 (UI as a Function of State)
|
|
category: Software Architecture
|
|
tags: [React, State, Mental Model, Immutability]
|
|
created: 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]]
|