[ vite+React 기초학습 8]리스트와 키 사용법

리스트란 무엇인가

리스트는 여러 개의 데이터를 배열 형태로 화면에 나열하는 것을 말합니다. React에서는 배열의 각 항목을 컴포넌트로 렌더링하며, 각 항목에는 고유한 키(key)를 부여해야 합니다.

기본 개념

• map() 함수를 이용해 배열 렌더링
• key는 각 항목을 구분하는 고유값
• key는 리액트가 효율적으로 업데이트하는 데 필요

주요 사용 위치/상황

• 게시글 목록, 댓글, 상품 리스트 등
• 배열 데이터를 UI로 변환할 때

구체적 코드 예시

function TodoList() {
  const todos = ['청소하기', '공부하기', '운동하기'];

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

핵심 요점 정리

• 배열 데이터를 map으로 컴포넌트화
• key 속성은 필수로 고유값 지정
• key는 리스트 렌더링 성능에 중요

 

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.