실전 예제: "즐겨찾기" 기능
작은 기능 하나를 끝에서 끝까지 만들어 보자. 사용자가 목록의 항목을 즐겨찾기로 표시하고, 몇 개를 즐겨찾기했는지 개수를 볼 수 있다.
자르기
내가 이걸 수직 단계로 쪼갠다면 이렇게 한다:
- 각 항목 옆에 별 버튼을 추가한다(아직 아무 동작도 안 하고, 그냥 보이기만).
- 별을 클릭하면 켜짐/꺼짐 모양이 토글된다(상태만, 저장은 안 됨).
- 토글을 반영하는 "★ 3개 즐겨찾기" 카운터를 보여준다.
- 페이지를 새로고침해도 유지되도록 즐겨찾기를 저장한다.
각 단계가 독립적으로 실행 가능하고 눈에 보인다는 점에 주목하라. 어느 단계 다음에서든 멈춰도 여전히 동작하는 앱을 갖게 된다.
1단계: 버튼
좋은 프롬프트는 파일, 변경 내용, 그리고 건드리지 말아야 할 것을 명시한다:
ItemCard 컴포넌트(src/components/ItemCard.jsx)에서 각 카드의
우상단 모서리에 별 버튼을 추가해줘. 외곽선 별 아이콘을 렌더링해야 해.
아직 클릭 동작은 연결하지 마 — 그냥 보이기만 하게 해.
나머지 카드 레이아웃은 그대로 유지해줘.
앱을 실행하라. 별이 보이는가? 좋다. 커밋하라:
git add -A && git commit -m "Add star button to item cards"
2단계: 상태 토글하기
별 버튼을 클릭하면 채워진 모양과 외곽선 모양 사이를 토글하게 만들어줘.
이걸 로컬 컴포넌트 상태로 추적해 — 아직 어디에도 저장하지 마.
채워진 별은 즐겨찾기됨을 의미해.
상태(state)는 앱의 단기 기억이라고 생각하면 된다 — 지금 이 순간 무엇이 참인지, 예컨대 특정 별이 지금 채워져 있는지 같은 것. 이제 상태와 UI를 함께 다루고 있는데, 이건 정상이다. (UI, 즉 사용자 인터페이스는 사람이 보고 클릭하는 앱의 부분일 뿐이다.) AI는 아마 이런 걸 추가할 것이다:
const [isFavorite, setIsFavorite] = useState(false);
<button onClick={() => setIsFavorite(!isFavorite)}>
{isFavorite ? <StarFilled /> : <StarOutline />}
</button>
별 몇 개를 클릭해 보라. 토글되는가? 커밋하라.
3단계: 카운터
항목 목록 상단에 "★ N개 즐겨찾기" 카운터를 추가해줘. 현재 별이
채워진 항목이 몇 개인지 세어야 해. 카운터가 볼 수 있도록 필요하면
즐겨찾기 상태를 목록 컴포넌트로 끌어올려도 돼.
이 단계에서는 AI가 상태가 사는 위치를 재구성해야 할 수도 있다 — 그건 예상된 일이고, 바로 그래서 이걸 별도의 작은 단계로 하는 것이다. 실행하고, 별 몇 개를 토글하고, 숫자가 바뀌는 걸 지켜보라. 커밋하라.
4단계: 유지되게 만들기
페이지를 새로고침해도 즐겨찾기가 살아남도록 유지해줘. 지금은
localStorage를 써 — 즐겨찾기된 항목 ID 목록이 바뀔 때마다 저장하고,
시작할 때 불러와.
(localStorage는 브라우저가 방문자 본인의 컴퓨터에 두는 작은 메모장 같은 것이라, 앱이 뭔가를 적어 두었다가 새로고침 후에도 다시 찾을 수 있다.) 페이지를 새로고침하라. 여전히 즐겨찾기되어 있는가? 당신은 방금 기능 하나를, 실행 가능한 슬라이스를 하나씩 쌓아 출시했다.
완성된 기능의 조각들이 서로 어떻게 대화하는지 보자. 클릭이 상태로 흘러 내려가고, 화면은 상태로부터 다시 그려지며, 상태는 저장소에 거울처럼 비쳐 새로고침에도 살아남는다:
┌─────────────────────────────────────────────┐
│ │
별 클릭 상태로부터
│ (이벤트) 다시 그림
▼ ▲
┌────────┐ 갱신 ┌─────────┐ 공급 ┌────────┐
│ UI │─────────────▶│ 상태 │───────────▶│ UI │
│ (버튼) │ │(앱 메모 │ │(채워진 │
└────────┘ │ 리 안) │ │ 별 + │
└────┬────┘ │카운터) │
│ 변경 시 저장 └────────┘
▼
┌──────────┐
│ 저장소 │ ◀── 시작 시 불러옴,
│(localSt.)│ 그래서 새로고침에도 살아남음
└──────────┘