10. 리스트 출력(map)
1. 리스트 출력이란?
React에서는 배열(Array)에 저장된 데이터를 화면에 출력할 때 map() 함수를 사용합니다.
예를 들어
코스 목록
공지사항
갤러리
게시판
회원 목록
등 대부분의 목록 화면은 map()으로 만들어집니다.
2. JavaScript의 map()
먼저 JavaScript에서의 map()을 살펴보겠습니다.
const courses = [
"EAST",
"WEST",
"VALLEY",
];
courses.map((course) => {
console.log(course);
});
출력
EAST
WEST
VALLEY
map()은 배열을 하나씩 꺼내 반복 실행합니다.
3. React에서 map()
React에서는 map()을 이용해 JSX를 출력합니다.
const courses = [
"EAST",
"WEST",
"VALLEY",
];
return (
<>
{courses.map((course) => (
<h2 key={course}>
{course}
</h2>
))}
</>
);
화면
EAST
WEST
VALLEY
4. key가 필요한 이유
React에서는 반복문을 사용할 때 key를 반드시 지정해야 합니다.
<h2 key={course}>
또는
key={course.id}
React는 key를 이용하여
추가
삭제
수정
된 데이터를 빠르게 찾습니다.
5. 객체 배열 출력
실무에서는 대부분 객체 배열을 사용합니다.
const courseData = [
{
id:1,
name:"EAST COURSE",
par:36
},
{
id:2,
name:"WEST COURSE",
par:36
}
];
출력
{
courseData.map((course)=>(
<div key={course.id}>
<h2>{course.name}</h2>
<p>PAR {course.par}</p>
</div>
))
}
6. 동부산CC 예제
{
courseData.map((course)=>(
<CourseCard
key={course.id}
course={course}
/>
))
}
CourseCard 하나만 만들면
React가 자동으로
EAST
WEST
VALLEY
카드를 모두 생성합니다.
7. map() 실행 과정
배열
[
"EAST",
"WEST",
"VALLEY"
]
↓
첫 번째
EAST
↓
두 번째
WEST
↓
세 번째
VALLEY
↓
React가 화면 생성
8. map()와 Props
부모
{
courseData.map((course)=>(
<CourseCard
course={course}
/>
))
}
자식
function CourseCard({
course
}){
return(
<h2>
{course.name}
</h2>
)
}
부모가 하나씩 데이터를 전달합니다.
9. filter()와 함께 사용
상급 코스만 출력
courseData.filter(
course=>course.level==="상급"
)
↓
map()
filtered.map(...)
동부산CC 프로젝트의
상급
중상급
초중급
탭 메뉴가 이런 방식으로 구현됩니다.
10. 검색 기능
const result = courseData.filter(
course=>course.name.includes(keyword)
);
↓
result.map(...)
검색 결과만 화면에 출력됩니다.
11. 게시판 예제
const board=[
{
id:1,
title:"공지"
},
{
id:2,
title:"예약 안내"
}
]
출력
{
board.map((item)=>(
<li
key={item.id}
>
{item.title}
</li>
))
}
12. map()와 index
가능은 하지만
key={index}
보다는
key={course.id}
처럼 고유 id를 사용하는 것이 좋습니다.
13. React 실행 흐름
배열
↓
map()
↓
JSX 생성
↓
React 렌더링
↓
화면 출력
14. 실무 예제
동부산CC
CourseCard
공지사항
Notice
갤러리
Gallery
예약 목록
Reservation List
회원 목록
Member List
모두 map()을 사용합니다.
15. map() 사용 시 주의사항
✔ 배열(Array)에서만 사용할 수 있습니다.
✔ 반드시 key를 지정해야 합니다.
✔ return 안에서 JSX를 반환해야 합니다.
✔ React에서는 반복문보다 map()을 사용하는 것이 일반적입니다.
정리
React에서는 배열 데이터를 화면에 출력할 때 map()을 사용합니다.
map()은 배열의 각 요소를 하나씩 꺼내 JSX를 생성하며, 생성된 JSX는 React가 화면에 렌더링합니다.
반복 출력 시에는 반드시 key를 지정해야 하며, 실무에서는 배열 안의 고유 id를 사용하는 것이 좋습니다.
동부산CC 프로젝트에서는 코스 카드, 공지사항, 갤러리, 예약 목록 등 대부분의 리스트를 map()으로 구현할 수 있습니다.
React에서 map()은 가장 자주 사용하는 문법 중 하나이며, 이후 배우게 될 API 데이터 출력에서도 동일한 방식으로 활용됩니다.
1. 리스트 출력이란?
React에서는 배열(Array)에 저장된 데이터를 화면에 출력할 때 map() 함수를 사용합니다.
예를 들어
코스 목록
공지사항
갤러리
게시판
회원 목록
등 대부분의 목록 화면은 map()으로 만들어집니다.
2. JavaScript의 map()
먼저 JavaScript에서의 map()을 살펴보겠습니다.
const courses = [
"EAST",
"WEST",
"VALLEY",
];
courses.map((course) => {
console.log(course);
});
출력
EAST
WEST
VALLEY
map()은 배열을 하나씩 꺼내 반복 실행합니다.
3. React에서 map()
React에서는 map()을 이용해 JSX를 출력합니다.
const courses = [
"EAST",
"WEST",
"VALLEY",
];
return (
<>
{courses.map((course) => (
<h2 key={course}>
{course}
</h2>
))}
</>
);
화면
EAST
WEST
VALLEY
4. key가 필요한 이유
React에서는 반복문을 사용할 때 key를 반드시 지정해야 합니다.
<h2 key={course}>
또는
key={course.id}
React는 key를 이용하여
추가
삭제
수정
된 데이터를 빠르게 찾습니다.
5. 객체 배열 출력
실무에서는 대부분 객체 배열을 사용합니다.
const courseData = [
{
id:1,
name:"EAST COURSE",
par:36
},
{
id:2,
name:"WEST COURSE",
par:36
}
];
출력
{
courseData.map((course)=>(
<div key={course.id}>
<h2>{course.name}</h2>
<p>PAR {course.par}</p>
</div>
))
}
6. 동부산CC 예제
{
courseData.map((course)=>(
<CourseCard
key={course.id}
course={course}
/>
))
}
CourseCard 하나만 만들면
React가 자동으로
EAST
WEST
VALLEY
카드를 모두 생성합니다.
7. map() 실행 과정
배열
[
"EAST",
"WEST",
"VALLEY"
]
↓
첫 번째
EAST
↓
두 번째
WEST
↓
세 번째
VALLEY
↓
React가 화면 생성
8. map()와 Props
부모
{
courseData.map((course)=>(
<CourseCard
course={course}
/>
))
}
자식
function CourseCard({
course
}){
return(
<h2>
{course.name}
</h2>
)
}
부모가 하나씩 데이터를 전달합니다.
9. filter()와 함께 사용
상급 코스만 출력
courseData.filter(
course=>course.level==="상급"
)
↓
map()
filtered.map(...)
동부산CC 프로젝트의
상급
중상급
초중급
탭 메뉴가 이런 방식으로 구현됩니다.
10. 검색 기능
const result = courseData.filter(
course=>course.name.includes(keyword)
);
↓
result.map(...)
검색 결과만 화면에 출력됩니다.
11. 게시판 예제
const board=[
{
id:1,
title:"공지"
},
{
id:2,
title:"예약 안내"
}
]
출력
{
board.map((item)=>(
<li
key={item.id}
>
{item.title}
</li>
))
}
12. map()와 index
가능은 하지만
key={index}
보다는
key={course.id}
처럼 고유 id를 사용하는 것이 좋습니다.
13. React 실행 흐름
배열
↓
map()
↓
JSX 생성
↓
React 렌더링
↓
화면 출력
14. 실무 예제
동부산CC
CourseCard
공지사항
Notice
갤러리
Gallery
예약 목록
Reservation List
회원 목록
Member List
모두 map()을 사용합니다.
15. map() 사용 시 주의사항
✔ 배열(Array)에서만 사용할 수 있습니다.
✔ 반드시 key를 지정해야 합니다.
✔ return 안에서 JSX를 반환해야 합니다.
✔ React에서는 반복문보다 map()을 사용하는 것이 일반적입니다.
정리
React에서는 배열 데이터를 화면에 출력할 때 map()을 사용합니다.
map()은 배열의 각 요소를 하나씩 꺼내 JSX를 생성하며, 생성된 JSX는 React가 화면에 렌더링합니다.
반복 출력 시에는 반드시 key를 지정해야 하며, 실무에서는 배열 안의 고유 id를 사용하는 것이 좋습니다.
동부산CC 프로젝트에서는 코스 카드, 공지사항, 갤러리, 예약 목록 등 대부분의 리스트를 map()으로 구현할 수 있습니다.
React에서 map()은 가장 자주 사용하는 문법 중 하나이며, 이후 배우게 될 API 데이터 출력에서도 동일한 방식으로 활용됩니다.
#10. 리스트 출력(map)