REACT ⑥ Lists and Keys

🚩 해당 글은 유튜브 The Net Ninja와 React 공식문서를
공부한 토대로 작성된 글입니다. 혹시라도 잘못된 글이 있다면
댓글로 알려주세요 🏃‍♀️🏃‍♀️

■ Rendering Multiple Components

• 여러 컴포넌트를 렌더링 할 때 자바스크립트의 map()을 사용한다.
• JSX에서는 map()을 { curly braces } 안에 넣어 여러 엘리먼트를 만들 수 있다.

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

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

■ Embedding map() in JSX

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

• 이렇게 따로 빼서 사용이 가능하지만

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

• 표현식은 { curly braces }를 통해 넣을 수 있기 때문에 바로 넣어도 가능하다.

■ Key

• 엘리먼트 리스트를 만들 때 리액트에서는 꼭 key가 있어야 한다.
• key가 있어야 하는 이유는 해당 키를 통해 리액트는 아이템이 변경, 추가, 삭제 되었는지 파악할 수 있기 때문이다.
• 주로 id를 key에 넣지만 없는 경우 index를 활용할 수 있다 (id가 없을 경우에만! index를 활용한다). → index를 사용하는 것을 추천하지는 않는다. 그 이유는 순서가 변경될 경우가 있기 때문이다. 이는 성능과 컴포넌트의 상태에 문제를 일으킨다.
• 키를 할당하지 않는 경우 리액트는 기본값으로 index를 키로 사용한다.

function ListItem(props) {
  // Correct! There is no need to specify the key here:
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Correct! Key should be specified inside the array.
    <ListItem key={number.toString()} value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

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

• 키는 배열 내에 명시되어야 한다 ?
• 키는 배열 내에 형제들끼리는 unique해야하지만, globally unique할 필요는 없다 (다른 배열에서 재사용 가능)