리스트 렌더링 - 배열을 화면으로
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. React에서 배열을 리스트로 렌더링할 때 주로 사용하는 JavaScript 메서드는?
💡 map()은 배열의 각 요소를 변환하여 새 배열을 반환합니다. forEach()는 반환값이 없어 JSX를 반환할 수 없습니다. React 리스트 렌더링에서는 map()이 표준적으로 사용됩니다.
Q2. React 리스트 렌더링에서 key Props에 대한 설명으로 옳지 않은 것은?
💡 Math.random()을 key로 사용하면 렌더링할 때마다 새로운 key가 생성되어 React가 모든 항목을 새로 그립니다. 이는 심각한 성능 문제와 의도치 않은 동작을 유발합니다. key는 데이터의 고유 id처럼 안정적인 값이어야 합니다.
Q3. 다음 코드에서 발생하는 문제는 무엇인가?
{items.map((item) => { <li>{item.name}</li>; })}
💡 화살표 함수에서 중괄호 {}를 사용하면 명시적 return이 필요합니다. {<li>{item.name}</li>;} 부분은 JSX를 반환하지 않고 버립니다. return <li>...</li>; 를 추가하거나 중괄호 대신 소괄호 ()를 사용해야 합니다.
Q4. products 배열에서 price가 10000 미만인 것만 렌더링하려면?
💡 filter()로 조건에 맞는 항목만 선택한 후 map()으로 JSX로 변환합니다. filter().map() 체인이 가장 깔끔하고 일반적인 방법입니다. key도 반드시 고유 값으로 지정해야 합니다.
Q5. key Props를 자식 컴포넌트 내부에서 지정하면 어떻게 되는가?
function Item({id, name}) { return <li key={id}>{name}</li>; }
💡 key는 map()을 사용하는 부모 컴포넌트 레벨에서 지정해야 합니다. 자식 컴포넌트 내부의 최상위 요소에 key를 달아도 React가 리스트를 식별하는 데 사용되지 않습니다. 항상 {items.map(item => <Item key={item.id} />)} 형태로 사용하세요.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.