Ch.10 이벤트와 완성 — 인터랙티브 홈페이지

배열과 반복 — 동적 콘텐츠

배열을 생성하고 요소를 추가/제거할 수 있다for 루프와 forEach로 배열을 순회할 수 있다map으로 배열 데이터를 HTML로 변환하여 렌더링할 수 있다

게시글 10개를 일일이 HTML로 작성하나요?

쇼핑몰 상품 목록, 게시판 글 목록, 갤러리 사진들 — 반복되는 데이터는 배열에 저장하고 반복문으로 한번에 화면에 그립니다.

데이터 배열을 HTML로 변환하려면?

배열 + 반복문 — 데이터를 저장하고, 반복적으로 DOM에 그리는 패턴입니다.

article

핵심 내용

배열은 여러 값을 순서대로 하나의 변수에 저장합니다

// 배열 생성
const fruits = ["사과", "바나나", "딸기"];

// 인덱스로 접근 (0부터 시작!)
console.log(fruits[0]);   // "사과"
console.log(fruits[2]);   // "딸기"
console.log(fruits.length); // 3

// 추가 / 제거
fruits.push("포도");       // 맨 뒤에 추가
fruits.pop();              // 맨 뒤 제거

// 포함 여부 확인
console.log(fruits.includes("바나나")); // true

배열을 순회하는 세 가지 방법을 비교합니다

const items = ["HTML", "CSS", "JavaScript"];

// 1. for 루프 (전통적)
for (let i = 0; i < items.length; i++) {
  console.log(items[i]);
}

// 2. forEach (배열 전용, 간결)
items.forEach((item) => {
  console.log(item);
});

// 3. map (새 배열 반환 — DOM 생성에 최적!)
const htmlList = items.map((item) => {
  return `<li>${item}</li>`;
});
console.log(htmlList.join(""));
// "<li>HTML</li><li>CSS</li><li>JavaScript</li>"

forEach = 단순 반복 실행 (반환값 없음) map = 각 요소를 변환하여 새 배열 반환 (DOM 생성에 유용!) 실무에서는 map을 가장 많이 사용합니다.

배열 데이터를 map으로 카드 목록에 렌더링합니다

배열의 각 요소를 변환하여 새 배열을 반환하는 메서드는?

JavaScript 배열의 인덱스는 1부터 시작한다

다음 중 배열에 새 요소를 추가하는 메서드는?

배열과 반복 완전 정복!

key

핵심 용어

➕

push()

맨 뒤에 요소 추가

➖

pop()

맨 뒤 요소 제거 및 반환

📏

length

배열 길이 (요소 개수)

🔍

includes()

특정 값 포함 여부 (true/false)

edit_note

정리 노트

배열과 반복 — 동적 콘텐츠 생성

배열 기초

배열 리터럴
const arr = [값1, 값2, ...]; — 순서가 있는 데이터 모음
인덱스 접근
arr[0]부터 시작 — 0-based 인덱싱
push() / pop()
배열 끝에 추가 / 제거

반복과 배열 메서드

for 루프
인덱스 기반 전통적인 반복문
forEach()
배열 각 요소에 콜백 함수를 실행
map()
각 요소를 변환하여 새 배열을 반환
filter()
조건에 맞는 요소만 걸러낸 새 배열 반환
★

map()과 filter()는 원본 배열을 변경하지 않는 '순수 함수'입니다.

image

시각 자료

check_circle

핵심 정리

  • 1배열: [], push(), pop(), includes(), length
  • 2for 루프 / forEach(반복) / map(변환 + 새 배열)
  • 3map + innerHTML로 데이터 → HTML 렌더링 패턴

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작