[React][리액트를 다루는 기술] map() 함수

map 함수

파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다

문법

arr.map(callback, [thisArg])

• callback은 새로운 배열의 요소를 생성하는 함수로, 파라미터는 세 가지가 있다.
  currentValue : 현재 처리하고 있는 요소
  index : 현재 처리하고 있는 요소의 index 값
  array : 현재 처리하고 있는 원본 배열
• thisArg(선택) : callback 함수 내부에서 사용할 this 레퍼런스

예제

데이터 배열 ➡️ 컴포넌트 배열

const names = ['눈사람', '얼음', '눈', '바람'];
const nameList = names.map(name => <li>{name}</li>);
return <ul>{nameList}</ul>;

map 함수에서 JSX를 작성할 때는 DOM 요소를 작성해도 되고, 컴포넌트를 사용해도 된다

key

컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용한다

✔️ key가 없을 때

Virtual DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지

✔️key가 있을 때

이 값을 사용해 어떤 변화가 일어났는지 더 빠르게 알아낼 수 있다

key 값은 map 함수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하듯 설정하면 된다

key 값은 언제나 유일해야 함 👉 데이터가 가진 고윳값을 key 값으로 설정

고유번호가 없다면 map 함수에 전달되는 콜백 함수의 인수인 index 값을 사용!

고유값이 없을 때만 index를 key 값으로 사용해야하는 이유
👉 index를 key로 사용하면 배열이 변경될 때 효율적으로 리렌더링 못함

불변성 유지 : 기존 상태를 그대로 두면서 새로운 값을 상태로 설정하는 것, 나중에 리액트 컴포넌트의 성능을 최적화할 수 있다.

불변성을 유지하면서 배열의 특정 항목을 지울 때는 filter를 사용
filter 함수의 인자에 분류하고 싶은 조건을 반환하는 함수를 넣어주면 됨

정리

• 컴포넌트 배열을 렌더링할 때는 key 값 설정에 항상 주의해야 함
• key 값은 언제나 유일해야 함 👉 key 값이 중복되면 렌더링 과정에서 오류 발생
• 상태 안에서 배열을 변형할 때는 배열에 직접 접근하여 수정하는 것이 아니라 concat, filter 등의 배열 내장 함수를 사용해 새로운 배열을 만든 후 이를 새로운 상태로 설정해 줘야 함