JSX는 태그 구조 안에 JavaScript 값을 꽂아 만든다
중괄호 안의 표현식은 렌더 시점에 계산되어 속성, 텍스트, 조건부 조각으로 들어간다. 구조와 값의 경계를 구분하면 JSX가 읽힌다.
JS value
name, count
렌더 입력 값
JSX slot
{value}
표현식 위치
element tree
<Card />
React 요소 생성
DOM update
diff result
변경된 부분 반영
위치
쓸 수 있는 값
주의
text
{name}
객체 직접 출력 금지
attribute
className={...}
문자열/불리언 구분
condition
&& 또는 ?:
0 렌더링 주의
list
map()
key 필요