리스트와 Key - 주요 개념

map(), filter() 메서드

array 타입의 메서드이다.

• someArray.map()
  인자로 어떤 함수를 넣어준다. 새로운 array 안에 어떤 함수를 통과한 결과를 리턴해줌.

const someArray = [1,2,3,4,5]
const mapArray = someArray.map(element => element + 3);
// mapArray는 이런 Array
mapArray === [4,5,6,7,8]

• someArray.filter()
  인자로 test 함수를 넣어준다. 새로운 array 안에 test 함수 통과한 값이 true 인 경우만 남기고 걸러줌.

const someArray = [1,2,3,4,5]
const filterArray = someArray.filter(element => element < 3)
// filterArray는 이런 Array
filterArray === [1,2]

---

map, filter 사용한 렌더링 예시

import { people } from './data.js';
import { getImageUrl } from './utils.js';

export default function List() {
  const chemists = people.filter(person =>
    person.profession === 'chemist'
  );
  const listItems = chemists.map(person =>
    <li>
      <img
        src={getImageUrl(person)}
        alt={person.name}
      />
      <p>
        <b>{person.name}:</b>
        {' ' + person.profession + ' '}
        known for {person.accomplishment}
      </p>
    </li>
  );
  return <ul>{listItems}</ul>;
}

1. chemists에 people 중 chemist로 필터링 된 array가 들어감.
2. listItems에는 <li> 태그들이 있는 array가 들어감.
3. List 컴포넌트는
   <ul> <li></li> <li></li> </ul> 이렇게 됨.

key

map() 메서드를 사용하여 렌더링 하는 경우, React가 각 엘리먼트를 식별하기가 매우 어려워진다. 그래서 map이 리턴하는 엘리먼트마다 key라는 식별자를 주도록 하고 있음.

array의 엘리먼트가 의미상 UNIQUE한 고유값을 가진 경우 그 값을 key값으로 편하게 지정해주면 됨. ex) id값

<li key={todo.id}> {todo.text} </li>

문제는 항목마다 안정적인 ID값이 없는 경우.

이 경우 index값을 사용해줄 수 있다. 다만!

filter같은 메서드로 array를 바꾸는 경우가 있을 수 있음.

예를 들어 위에서 listItems를 state에 넣어놓고, 사용자가 버튼을 눌러서 삭제할 수 있게 한다고 치자.

그럼 array가 중간에 바뀔것임. 그러면 순서가 바뀌니까 index값이 바뀐다.

그러면 헷갈려질 수 있다..

+. 당연히 Math.random()같은 거로 지정해주면 안좋다! 일단 느릴 것이고, 헷갈릴 수 있으니까.

리액트 입장에서 Key가 필요한 이유

그럼 왜 각 노드를 고유값으로 관리해야 하는가?

리액트는 바뀐 정보만 리렌더링한다.

렌더링 간 뭐가 바뀐지 알려면 식별자가 필요함.

노드가 위치가 바뀌거나 순서가 바뀌어도 key값으로 관리하면 같은 노드라는 것을 인식시켜줄 수 있음.