React · 02 JSX와 순수한 렌더
단계: 컴포넌트와 상태 계산 · 편집 가능한 예제 · 저장 ID: react-step-02
목표와 학습 후 역량
- 동일 입력 두 번의 제목·배지가 같다.
- 완료 카드의 aria-pressed가 true다.
선수 지식
2단위는 1단위 결과물과 실험 기록을 이어 사용합니다.
핵심 개념과 설명
JSX 표현식
JSX 중괄호에는 JavaScript 표현식을 넣습니다. 문자열과 속성은 데이터에서 계산하되 render 중 데이터를 변경하지 않습니다.
순수성
동일한 props와 state는 동일한 화면 계산을 만들어야 합니다. 배열에 push하거나 외부 카운터를 늘리는 코드는 호출 횟수에 따라 결과를 바꿉니다.
실습 준비
예제 화면의 실행 범위 안내를 먼저 확인하세요. 다음은 과제를 별도 프로젝트로 확장할 때의 준비 환경입니다. 별도 React Vite 프로젝트의 JSX 실습입니다. Node와 패키지 버전·lockfile을 기록하고 프로젝트 개발 서버에서 실행하세요. 내장 편집기는 범용 JSX 컴파일러가 아닙니다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- src/Card.jsx에 title과 done props를 받는 함수 컴포넌트를 작성하세요.
- done에 따라 배지와 aria-pressed를 계산하고 카드 데이터는 변경하지 마세요.
- Object.freeze한 입력으로 같은 카드를 두 번 렌더하고 제목·배지를 비교하세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| done | false | true | 배지와 눌림 상태만 변하고 원본 객체는 그대로다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- 동일 입력 두 번의 제목·배지가 같다.
- 완료 카드의 aria-pressed가 true다.
자가 점검
- render 중 push가 왜 위험한가요?
- 표시용 배지를 state로 저장해야 하나요?
공식 참고
연결된 예제와 실행 범위
실제 React API 실험입니다. JSX 대신 createElement를 사용합니다.
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.