6. 컴포넌트 반복

map()

• 웹 애플리케이션을 만들다 보면 다음과 같이 반복되는 코드를 작성할 때가 있습니다.
• 자바스크립트 배열 객체의 내장 함수인 map  함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있습니다.
• map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성합니다.

arr.map(callback, [thisArg])

이 함수의 파라미터는 다음과 같습니다.

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

key

• 리액트에서 key는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용합니다.
• key가 없을 때는 Virtual DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지합니다.
• key 값을 설정할 때는 map 함수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하듯이 설정하면 됩니다.
• 만약 컴포넌트에 이런 고유 번호가 없으면 이때는 map 함수에 전달되는 콜백 함수의 인수인 index 값을 사용하면 됩니다.

응용

1. id를 넣어서 초기 상태 설정하기
   • index를 사용하지 않고 key를 만든다.
2. 데이터 추가 기능 구현
   • 이벤트 추가
   • concat으로 불변성 유지 ( push로 직접적으로 추가 금지 )
     • concat : 새로운 배열을 만들어 상태 변경시 기존 배열의 값을 유지
     • ...(spread) 연산자로 대체 가능
3. 데이터 제거 기능 ( filter() )
   • 특정 조건을 만족하는 원소들을 분류
   • 분류된 배열 새로운 배열로 return -> 불변성 유지
   • filter()
   • 구현
     • map을 통해 name.id를 key 로 가지고 있는 DOM에 onRemove 함수 설정
     • filter가 불변성 유지가 되기 때문에 concat, spread 쓸 필요 없음.