---
id: react
title: "React"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["React", "리액트", "react.js", "ReactJS"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.80
created_at: 2026-07-11
updated_at: 2026-07-11
review_reason: "깨진 링크 다발 해소용 AI 생성 초안 — 원출처 리서치로 검증·보강 권장"
merge_history: []
tags: ["frontend","react","javascript"]
raw_sources: []
applied_in: []
github_commit: ""
---

# [[React]]

## 🎯 한 줄 통찰 (One-line insight)
UI를 상태의 함수로 선언하는 컴포넌트 기반 라이브러리 — "상태가 바뀌면 화면을 어떻게 고칠까" 대신 "이 상태면 화면은 이렇다"를 기술한다.

## 🧠 핵심 개념 (Core concepts)
- **컴포넌트** — UI를 독립·재사용 가능한 조각으로 분해한다. props 로 데이터를 받고 자신의 state 를 가진다.
- **선언적 렌더링** — DOM 조작을 직접 하지 않고 상태→UI 매핑을 선언하면 React 가 차이를 계산해 반영한다(가상 DOM 재조정).
- **단방향 데이터 흐름** — 데이터는 부모→자식으로 흐르고, 자식은 콜백으로 변경을 요청한다. 추적 가능성이 핵심 이점.
- **훅(Hooks)** — useState/useEffect 등으로 함수 컴포넌트에 상태와 생명주기를 부여한다.

## 🧩 추출된 패턴 (Extracted patterns)
- 상태를 어디에 둘지가 설계의 8할 — "그 상태를 필요로 하는 컴포넌트들의 최소 공통 조상"에 두는 것이 기본 원칙(state lifting).

## 🔗 Knowledge Connections
- **Related Topics:** [[JavaScript Tutorial]] · [[Software Architecture]]