16 lines
1.1 KiB
Markdown
16 lines
1.1 KiB
Markdown
# 🍼 [LEVEL 1] 리액트의 심장: UI는 상태(State)의 함수다
|
|
|
|
## 1. 생각의 전환: "어떻게(How)"가 아니라 "무엇을(What)"
|
|
- **HTML/JS 방식**: "버튼을 찾아서, 클릭 이벤트를 걸고, 텍스트를 바꾼다." (명령형)
|
|
- **리액트 방식**: "상태가 `ON`이면 '켜짐'을 보여주고, `OFF`이면 '꺼짐'을 보여준다." (선언형)
|
|
- **교훈**: 중급 주니어는 DOM을 직접 건드리지 않는다. 오직 **상태**만 건드린다.
|
|
|
|
## 2. 불변성(Immutability): 왜 `push`는 안되나요?
|
|
- 리액트는 "값이 바뀌었네?"를 메모리 주소값으로 판단한다.
|
|
- `arr.push(1)`은 주소는 그대로고 내용만 바뀐다. 리액트는 바뀐 줄 모른다!
|
|
- **정답**: `setArr([...arr, 1])` 처럼 항상 **새로운 복사본**을 던져라.
|
|
|
|
## 3. 단방향 데이터 흐름: 물은 위에서 아래로 흐른다.
|
|
- 부모가 자식에게 주는 건 `Props`. 자식이 부모를 바꾸려면 부모가 준 `함수`를 호출하라.
|
|
- **하지 말 것**: 자식이 부모의 상태를 몰래 바꾸는 '매직'은 시스템을 망친다.
|