🙋‍♀️ 사담으로 뜬근없이 '왜 map함수 게시물이지?' 그리고 React를 세세히 적지않고 넘어간다고 생각할 수도 있지만 WeCode 시리즈는 WeCode에서 배웠던 것, assignment를 기록하고자 적는거라 내용이 보람차지 않게 보일 수는 있다. 카테고리별로 모르는 부분이 나오면 그 부분 시리즈에 더 추가로 계속 적을 예정이다

---

map()

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

let numbers = [1, 4, 9];
let roots = numbers.map(x => x / 2);

👉 roots는 [1, 2, 3], numbers는 그대로 [1, 4, 9]을 가지게 된다.

• map함수의 값은 이전의 값에 영항을 주지않고 새로운 값을 주게되는게 map함수의 포인트이다.

그래서 여러 개의 Component를 만들 때 map함수를 써서 한 개의 Component로 재사용하여 여러 개 보여줄 수 있는데 각 항목에 고유의 key 값이 있는데 좋다

🔑KEY 값이 필요한 이유?

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다.
👉 Component를 여러 개로 재활용하여 사용할 때 원하는 부분에 수정해야하는 상황이면 각 Component를 식별 할 수 없으니 이 때 key가 있으면 접근하기 용이하다는 소리이다.

🔑KEY는 어디에 지정해줘야 하나?

• Key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.
  👉 <ul>태그와 <li>태그가 있다면 싸고 있는 <ul>가 아닌 각 <li>에 Key가 필요하여 부여한다.
• map()으로 반복하는 Component의 안에 있는 요소가 아닌 그 자체의 Component에 key값을 지정해야한다

• 보통 Key 값은 가져온 데이터의 고유의 ID 값으로 사용하는데 만약 없다면 엘리먼트의 index값으로 Key 값으로 사용할 수 있다.
• Key 값은 같은 배열 안에서는 똑같은 값을 사용하게 되면 고유하지 않게 되니 그럴 수 없지만, 다른 배열에 사용할 수 있다.

---

ID를 key 값으로 사용하는 이유

항목의 순서가 바뀔 경우 index값도 바뀌기 때문에 의도했던 엘리먼트의 키값이 달라지게 되어 성능이 저하되거나 Component의 state와 관련된 문제가 발생할 수 있기 때문

---

😃느낀점
수업을 들으면서 대충 왜 key 값을 주는지는 알았지만 무엇 때문에 동적인 값(ex: index)은 key 값으로 주는 것을 추천하지 않고 또 정확히 어디에 지정해줘야하는지 명확하게 알 수 있었다.
아직까지 JavaScript를 놓진 못했지만 점점 React랑 친해져야되겠다.