JSX practice

ProductCard JSX 구조

예제의 태그는 화면 뼈대를 만들고, 중괄호 표현식은 props 값과 계산 결과를 화면에 연결합니다.

props

입력값 읽기

name, price, imageUrl, isInStock을 받아 같은 카드 구조를 다른 상품으로 렌더링합니다.

brace

값 삽입

src={imageUrl}, {price}처럼 JavaScript 값이 필요한 자리에 중괄호를 사용합니다.

condition

상태 문구 선택

isInStock 값으로 재고 문구를 고릅니다.

event

행동 연결

onClick에는 실행할 함수 참조를 넘깁니다.

<img src={imageUrl} alt={name} />
<h2>{name}</h2>
<p>가격: {price}원</p>
{isInStock ? <p>재고 있음</p> : <p>재고 없음</p>}
<button onClick={() => alert(name)}>장바구니 담기</button>

속성 className, src, alt, onClick은 JSX prop으로 전달됩니다.
표현식 문자열이 아닌 값과 조건식은 모두 중괄호 안에서 평가됩니다.

읽는 순서

태그 구조를 먼저 보고, 중괄호가 어떤 props를 화면과 이벤트에 연결하는지 확인하면 JSX 예제가 덜 복잡하게 보입니다.