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