[React] List와 Key (7)

- map() : 반복 실행

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2); // map으로 배열의 값을 두 배로 만듦
console.log(doubled);

결과

2, 4, 6, 8, 10

---

여러 개의 컴포넌트 렌더링 하기

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

- 1 -> <li> 1 </li>

- 2 -> <li> 2 </li> ...

- map을 이용해 1부터 5까지 숫자를 리스트 형식으로 바꿔줌

<ul>{listItems}</ul>

 

기본 리스트 컴포넌트

- key: 엘리먼트 리스트를 만들 때 포함해야 하는 특수 문자열 어트리뷰트

- list에서 key 값 설정은 필수적

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}> // 중요) key 값 설정
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NumberList numbers={numbers} />);

 

Key

- React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도움

- 배열 내부에서 지정

- 해당 항목을 고유하게 식별할 수 있는 문자열 사용

1. 렌더링 항목의 id 사용

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

2. id가 없다면 인덱스 key 사용

- 최후의 수단

- list 항목의 순서가 바뀔 가능성이 있다면 권장 ❌

const todoItems = todos.map((todo, index) =>
  <li key={index}>
    {todo.text}
  </li>
);

 

Key의 올바른 사용

- 무조건 <li> </li>에 단다고 정답이 아님

- 배열의 맥락에서 사용해야 함

잘못된 key 사용

function ListItem(props) {
  const value = props.value;
  return (
    <li key={value.toString()}> // 오류) key 지정할 필요 X
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) => // 배열 반복
    <ListItem value={number} /> // 오류) key 지정 필요
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

올바른 key 사용

function ListItem(props) {
  return <li>{props.value}</li>; // 정답) key 지정 생략
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <ListItem key={number.toString()} value={number} /> // 정답) key 지정
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

---

JSX에 map() 포함시키기

수정 전

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) => // 배열을 반복해 listItems 변수에 저장
    <ListItem key={number.toString()}
              value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

수정 후

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) => // JSX 구문 내에서 배열 반복
        <ListItem key={number.toString()}
                  value={number} />
      )}
    </ul>
  );
}

- 코드가 더 깔끔해지지만 남발하는 것은 ❌

- 상황에 따라 컴포넌트로 추출하기