1
mockCards
title, description, category, imgUrl이 카드 하나의 원본 값이다.
카드 목록은 data, state, props, style이 한 번에 이어진다
필터 버튼을 누르면 상태가 바뀌고, 남은 데이터가 CardItem props로 내려가며, 카드 내부에서는 CSS 모듈과 작은 인라인 스타일이 최종 UI를 만든다.
렌더링 값 이동
props flow
2
filterCategory
버튼 클릭으로 state가 바뀌면 filteredCards가 다시 계산된다.
3
CardItem props
map으로 남은 카드만 내려가고, 각 CardItem은 받은 card만 렌더링한다.
스타일 책임 분리
style scope전역 기본값
body, App, 공통 유틸리티처럼 앱 전체 기준을 둔다.
목록 레이아웃
CardsContainer와 active 버튼처럼 상태와 가까운 스타일을 맡긴다.
카드 내부
card, image, content 클래스가 컴포넌트 밖과 충돌하지 않는다.
작은 동적 색
categoryColorMap처럼 값 하나에 따른 배지 색만 가볍게 바꾼다.
디버깅 추적 순서
render check
data
state
filter
props
render