Component 반복하기!

kimhanna·2020년 11월 1일
0

배열 데이터를 컴포넌트 배열로 반환

const IterationSample = () => {
  const names = ['눈사람', '얼음', '눈', '바람'];
  const nameList = names.map(name => ''<li>{name}</li>);
  return (
    <div>
      <ul>{nameList}</ul>
    </div>
  );
};

key문제가 발생합니다. 리액트에서 key는 배열의 어떤 원소에 변경이 일어났는지 알아내기 위해 사용합니다. Virtual DOM에서 변경사항을 알아낼때 더 빠르게 알 수 있습니다. key가 없으면 순차적으로 비교하지만 key가 있으면 해당 key로 알아낼 수 있습니다.

key를 설정해보도록 합시다.

const IterationSample = () => {
  const names = ['눈사람', '얼음', '눈', '바람'];
  const nameList = names.map((name, index) => <li key={index}>{name}</li>);
  return (
    <div>
      <ul>{nameList}</ul>
    </div>
  );
};

map에 전달되는 index를 key로 설정한 예제입니다. 하지만 배열의 인덱스를 바로 키로사용하면 리렌더링할때 효율적이지 않아 되도록 피하는것이 좋습니다.

const arrayList = array.map(item => (
    <Item
        title={item.title}
        writer={item.writer}
        key={item.id}
        />
))

보통 다음과같이 props를 설정하듯 설정하고 그중 고유한 값을 key값을 설정하면 됩니다.

profile
한 줄의 코드가 유저의 일상을 변화시키는 매력에 반해 프론트엔드 개발자가 되었습니다. 늘 배움의 자세로 유저를 위한 기술을 구현하겠습니다. 저는 함께 이뤄내는 결과의 가치를 믿습니다.

0개의 댓글