[React] 리액트 반복 렌더링

map 메서드와 반복 렌더링

map 메서드는 배열의 요소를 순회하며 새로운 배열을 반환하는 역할을 함

리액트에서 자주 사용되는 이유는 JSX 요소를 배열 데이터로부터 생성하는 작업에 매우 적합하기 때문임

---

map 메서드의 특징

1. 콜백 함수 실행: 배열의 각 요소를 순회하며 콜백 함수 실행
2. 새로운 배열 생성: 콜백 함수의 반환값으로 구성된 새로운 배열 생성
3. 원본 배열 불변: 원본 배열 유지

---

리액트에서의 활용

리액트에서는 map 메서드를 사용해 배열 데이터를 JSX 요소로 변환하여 반복 렌더링이 가능함

💡 표현식({})에서 객체는 직접 출력이 불가능하며, JSON.stringify()를 사용하여 문자열로 변환해야 함

예시

export default function Loop() {
  // 배열 데이터 생성
  const items = ["apple", "banana", "cherry"];
  return (
    <ul>
      {items.map((item) => {
        return <li>{item}</li>;
      })}
    </ul>
  );
}

실행 결과

<ul>
  <li>apple</li>
  <li>banana</li>
  <li>cherry</li>
</ul>

---

map 메서드의 매개변수

map 메서드는 3개의 매개변수를 받을 수 있음:

1. item: 현재 처리 중인 요소 (필수)
2. index: 현재 처리 중인 요소의 인덱스 (선택)
3. array: map을 호출한 배열 자체 (선택)

예시: item과 index 사용

export default function LoopWithIndex() {
  const items = ["apple", "banana", "cherry"];
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{`${index + 1}. ${item}`}</li>
      ))}
    </ul>
  );
}

실행 결과

<ul>
  <li>1. apple</li>
  <li>2. banana</li>
  <li>3. cherry</li>
</ul>

---

key 속성

리액트에서 반복 렌더링할 때는 각 요소에 고유한 key 속성을 지정해야 함

key 역할

1. 렌더링 성능 최적화: 변경된 요소를 효율적으로 업데이트
2. 요소 추적: 요소를 정확히 식별

key 설정 예시

export default function LoopWithKey() {
  const items = ["apple", "banana", "cherry"];
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

💡 주의: 배열의 인덱스를 key로 사용하는 것은 권장되지 않음. 데이터에 고유한 값(ID)이 있다면 이를 사용할 것