[React] map() 함수 정복하기

안녕하세요 :>

오늘은 리액트에서 상태값 관리 함수 (ex. useState 등) 만큼 !!!! 중요한 !!!!

map() 함수에 대해 확실히 공부하여 언제든 활용가능하도록

연습해보는 시간을 갖겠습니다 😃

---

map() 함수란?

아래 예시에 배열을 items로 선언해두었으니 이로 설명드리자면,

items의 모든 요소의 값을 변경하여 새로운 배열을 사용해야할 때 쓰이는 함수입니다!

다시 말하자면, 배열(리스트)의 요소를 반복하고! 각 요소에 대해 어떤 동작을 수행합니다!

 

자주 쓰이는 패턴을 아래 세 가지로 나누어 설명드리겠습니다:)

 

패턴 1

const items = [1, 2, 3, 4, 5];

const itemElements = items.map((item) => (
  <div key={item}>{item}</div>
));

items 배열의 각 요소를 반복합니다!

여기에서 key에 대해 더 자세히 알아봅시다!

React가 각 요소를 구별하고 효율적으로 업데이트할 수 있도록 도와주는 고유한 값입니다!

 

쉽게 말하자면, 각각의 엘리먼트를 식별하고 추적하기 위한 유일한 식별자입니다!

이 패턴에서는 각 항목은 자체의 값을 Key로 사용하고 있는데요!

 

결과
<div key="1">1</div>
<div key="2">2</div>
<div key="3">3</div>
<div key="4">4</div>
<div key="5">5</div>

 

만약 items 배열에서 중복된 값이 있을 경우 오류가 생길 수 있겠죠?!!!

그래서 이를 방지하기 위한 패턴들을 아래에서 더 살펴보겠습니다!

 

패턴 2

const items = ['apple', 'banana', 'cherry'];

const itemElements = items.map((item, index) => (
  <div key={index}>
    {item} is at index {index}
  </div>
));

이는 두 가지 매개변수를 가지는 콜백 함수입니다!

이러한 방식은 배열의 각 요소와 해당 요소의 인덱스에 동시에 접근할 때 유용한데요!

 

여기에서 (item, index)는 각각 배열의 현재 요소와 해당 요소의 인덱스를 나타내며,

=> 다음에 오는 부분은

해달 요소와 인덱스를 이용하여 수행할 작업을 정의한 것입니다!

 

결과
<div key="0">apple is at index 0</div>
<div key="1">banana is at index 1</div>
<div key="2">cherry is at index 2</div>

 

패턴 3

const items = [
  { id: 1, text: 'Apple' },
  { id: 2, text: 'Banana' },
  { id: 3, text: 'Cherry' },
];

const itemElements = items.map((item) => (
  <div key={item.id}>{item.text}</div>
));

위 코드에서는 앞서 설명한 key값에 item.id를 사용하여 각 항목을 고유하게 식별하는 패턴입니다!

이렇게 하면 React는 각 항목을 신속하게 업데이트하고 관리할 수 있습니다 :)

배열 순서의 변경에 민감하지 않기 때문이죠!

결과
<div key="1">Apple</div>
<div key="2">Banana</div>
<div key="3">Cherry</div>

 

---

더 궁금하신 점은 편하게 댓글 남겨주세요 :)