React
조건과 배열로 화면 표시하기
조건에 따라 요소를 고르고 배열을 화면 항목으로 바꿉니다.
이럴 때 필요해요
남은 좌석이 있을 때 좌석 목록을 표시합니다.
어떻게 동작하나요?
JSX의 중괄호 안에서도 JavaScript 조건식을 사용할 수 있습니다. 조건 ? A : B는 조건이 참이면 A, 아니면 B를 고릅니다.
배열의 map은 각 항목을 다른 값으로 바꾸어 새 배열을 만듭니다. 좌석 객체를 li 요소로 바꾸면 목록을 표시할 수 있습니다.
목록에서 React가 같은 항목을 알아보도록 형제 사이에 고유하고 안정적인 key를 줍니다. 아래에서는 좌석 id를 사용합니다. 정렬과 상태 보존의 관계는 원리 노트와 좌석 선택 상황에서 이어집니다.
코드 예제
동작을 설명하는 읽기 전용 예제입니다.
export default function Seats() {
const seats = [{ id: "A1" }, { id: "A2" }];
return seats.length === 0 ? <p>매진</p> : (
<ul>{seats.map(seat => <li key={seat.id}>{seat.id}</li>)}</ul>
);
}두 좌석을 목록으로 표시하며 빈 배열이면 매진을 표시합니다.
자주 헷갈리는 포인트
- map 콜백에서 요소를 반환해야 화면에 항목이 나타납니다.
- 렌더마다 임의의 key를 새로 만들지 않습니다.
내 말로 설명해 보기
seats를 빈 배열로 바꾸면 어떤 화면이 나올까요?
생각할 단서 예제의 값을 하나 바꿔 보고, 바뀌는 부분과 그대로인 부분을 구분해 보세요.
예시 답변 확인
설명에 들어갈 핵심
- 조건에 따라 요소를 고르고 배열을 화면 항목으로 바꿉니다.
- 두 좌석을 목록으로 표시하며 빈 배열이면 매진을 표시합니다.
예시 답변
조건이 참이 되어 매진 문단이 표시됩니다. 데이터가 있으면 각 좌석을 li로 변환합니다.
문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.