[React] # 7 리스트와 Key

simoniful·2021년 7월 7일
0

React

목록 보기
7/13
post-thumbnail

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

map method는 배열의 요소를 순회하며 해당 콜백을 실행한 후 변화된 새 배열을 리턴합니다. 이를 활용하여 react에서는 원하는 컴포넌트를 데이터 만큼 렌더링합니다.

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')
);

Key

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.

키는 주변 배열의 context에서만 의미가 있기 때문에, 경험상 map() 함수 내부에 있는 엘리먼트에 key를 넣어 주는 게 좋습니다. Key는 배열 안에서 형제 사이에서 고유해야 하고 전체 범위에서 고유할 필요는 없습니다. 두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있습니다.

Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것입니다. 대부분의 경우 데이터의 ID를 key로 사용합니다.

항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장하지 않습니다. 피치못할 상황이라면 이를 사용하는 것은 허용되지만 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있습니다.

👉🏻 Index가 아닌 고유 id를 사용해야 하는 이유
👉🏻 차이의 예시

function Blog(props) {
  const sidebar = (
    <ul>
      {props.posts.map((post) =>
        <li key={post.id}>
          {post.title}
        </li>
      )}
    </ul>
  );
  const content = props.posts.map((post) =>
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  );
}

const posts = [
  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
  {id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
  <Blog posts={posts} />,
  document.getElementById('root')
);
profile
소신있게 정진합니다.

0개의 댓글