응답 데이터에서 화면 상태까지
HTTP JSON을 받은 뒤 구조 분해로 필요한 필드만 꺼내고, 스프레드로 기존 상태를 얕게 복사해 렌더 입력을 만든다.
| 단계 | 하는 일 | 문법 | 검토할 것 |
|---|---|---|---|
| Receive | JSON 응답을 받음 | await res.json() | 응답 구조 검증 |
| Pick | 필요 필드를 꺼냄 | const { items } = data | 없는 필드 기본값 |
| Rename | 화면에서 쓸 이름으로 변환 | { id: userId } | 의미 있는 변수명 |
| Copy | 기존 상태를 얕게 복사 | { ...state, items } | 중첩 객체 mutation 주의 |
| Render input | DOM이나 컴포넌트에 전달 | setState(next) | 원본 응답과 화면 상태 분리 |
구조 분해와 스프레드는 API 응답을 그대로 쓰지 않고 화면에 맞는 상태 모양으로 바꾸는 중간 도구다.