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