입력값
name, price, imageUrl, isInStock이 같은 카드 구조를 다른 상품으로 바꿉니다.
ProductCard JSX는 태그, 값, 조건, 행동으로 읽는다
JSX 예제는 HTML처럼 생긴 구조 안에 JavaScript 값과 이벤트를 끼워 넣는 코드입니다. 먼저 화면 뼈대를 보고, 그다음 중괄호가 어떤 데이터를 연결하는지 추적합니다.
값 삽입
문자열이 아닌 값은 중괄호 안에서 평가되어 화면과 속성에 들어갑니다.
상태 문구
재고 여부 같은 boolean 값은 조건식으로 다른 UI 조각을 고릅니다.
행동 연결
onClick에는 실행 결과가 아니라 클릭 시 실행할 함수 참조를 넘깁니다.
코드 위치읽는 기준확인할 실수
<img />src와 alt가 props에서 온다닫는 슬래시와 alt 누락
{price}표현식 결과를 화면에 넣는다문자열처럼 따옴표로 감싸기
isInStock ?상태에 따라 문구를 고른다조건과 렌더 결과를 섞어 읽기
onClick사용자 행동을 함수와 연결한다렌더 중 즉시 실행하기
태그 구조, 중괄호 표현식, 조건 렌더링, 이벤트 핸들러 순서로 보면 JSX가 화면 선언과 값 연결의 조합으로 보입니다.