입력값
name, price, imageUrl, isInStock이 같은 카드 구조를 다른 상품으로 바꿉니다.
ProductCard JSX 읽기 지도
JSX 예제는 HTML처럼 생긴 구조 안에 JavaScript 값과 이벤트를 끼워 넣는 코드입니다. 먼저 화면 뼈대를 보고, 그다음 중괄호가 어떤 데이터를 연결하는지 추적합니다.
값 삽입
문자열이 아닌 값은 중괄호 안에서 평가되어 화면과 속성에 들어갑니다.
상태 문구
재고 여부 같은 boolean 값은 조건식으로 다른 UI 조각을 고릅니다.
행동 연결
onClick에는 실행 결과가 아니라 클릭 시 실행할 함수 참조를 넘깁니다.
핵심reading order 태그 구조, 중괄호 표현식, 조건 렌더링, 이벤트 핸들러 순서로 보면 JSX가 화면 선언과 값 연결의 조합으로 보입니다.