Client state

setState는 값을 바꾸고 렌더를 다시 예약한다

좋아요 버튼의 isLiked와 likes는 클라이언트 컴포넌트 안에서 유지되고, 이벤트 핸들러가 상태 업데이트를 요청하면 React가 새 UI를 계산합니다.

1

초기 렌더

useState(false)와 useState(0)이 첫 화면의 버튼 문구와 개수를 만듭니다.

2

클릭 이벤트

onClick 핸들러가 현재 isLiked 값을 기준으로 다음 상태를 계산합니다.

3

업데이트 큐

setIsLiked와 setLikes 호출은 즉시 DOM을 고치지 않고 React에 업데이트를 예약합니다.

4

리렌더링

새 상태로 컴포넌트 함수가 다시 실행되고 버튼 텍스트와 숫자가 바뀝니다.

props에서 state로 복사 UserProfile처럼 부모가 준 userName을 초기값으로만 쓰면 이후 currentName 변경은 자식 컴포넌트 내부 상태가 관리합니다.