React에서 map으로 목록 출력하기

React에서 map으로 목록 출력하기에서 먼저 볼 부분

React에서 배열을 화면에 보여줄 때 map을 사용합니다. 각 항목에는 안정적인 key를 넣어 React가 변화를 추적하게 해야 합니다.

map은 데이터 배열을 JSX 배열로 바꾸는 역할을 합니다. 데이터가 늘어나면 화면 항목도 자연스럽게 늘어납니다.

key는 React가 어떤 항목이 추가, 수정, 삭제되었는지 구분하는 단서입니다. 가능하면 배열 인덱스보다 고유 id를 사용하는 것이 좋습니다.

목록 렌더링을 익히면 게시글 목록, 상품 카드, 댓글 목록처럼 많은 UI를 같은 방식으로 만들 수 있습니다.

할 일 목록

function TodoList() {
  const todos = [
    { id: 1, text: "HTML 복습" },
    { id: 2, text: "CSS 정렬 연습" }
  ];

  return <ul>{todos.map((todo) => <li key={todo.id}>{todo.text}</li>)}</ul>;
}

이 예제는 그대로 복사해서 확인하는 것보다 한 줄씩 바꿔보는 쪽이 더 도움이 됩니다. 태그 이름, 선택자, 변수 이름, 함수 실행 위치를 조금씩 바꾸면 어떤 부분이 결과에 영향을 주는지 직접 확인할 수 있습니다.

잘못 작성했을 때 나타나는 흐름

React 글은 화면 조각, 데이터 흐름, 상태 변경 시점을 나누어 읽으면 헷갈림이 줄어듭니다.

값이 부모에서 내려오는지, 컴포넌트 내부에서 바뀌는지 구분하면 props와 state 관련 오류를 훨씬 빨리 찾을 수 있습니다.

작은 예제라도 렌더링 전후에 화면이 왜 바뀌는지 설명할 수 있어야 다음 단계의 Hook을 이해하기 쉽습니다.

브라우저에서 직접 확인하는 순서

먼저 화면에 나타나는 결과를 보고, 그다음 코드에서 방금 수정한 부분을 확인하세요. 결과가 예상과 다르다면 콘솔 오류, 파일 경로, 선택자 이름, 태그 닫힘, 실행 순서 중 하나가 흔한 원인입니다.

초보 단계에서는 정답 코드를 한 번에 외우기보다 실패한 코드와 수정한 코드를 나란히 비교하는 방식이 좋습니다. 이 글의 예제를 기준으로 작은 값을 바꿔보면 다음 글을 읽을 때도 기준이 더 선명해집니다.

실습 후 점검할 항목

• map 안에서 JSX를 return하는지 확인하기
• 각 항목에 key 넣기
• key로 배열 인덱스를 남용하지 않기
• 데이터 구조와 화면 구조를 분리해서 생각하기