리스트와 Key

https://ko.reactjs.org/docs/lists-and-keys.html를 읽고 정리한 글입니다

 

• 리스트 컴포넌트

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

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

• Key
  • React가 어떤 항목을 변경, 추가, 삭제할지 식별 
  • 엘리먼트의 안정적인 고유성 부여하기 위함
  • 리스트 내에서 고유하게 식별할 수 있는 항목의 문자열 사용하는 것 권장 (예 : ID)
  • 안정적인 ID가 없다면 최후의 수단으로 index 사용 ⇒ 항목의 순서가 바뀔 수 있는 경우 권장 안 함
    • 성능 저하 또는 state 문제 발생 가능
  • 주변 배열의 context에서만 의미 ⇒ map() 함수 내부의 엘리먼트에 넣는 것 권장
  • 배열 안 형제 사이에서 고유해야하지만, 전체 범위에서는 고유할 필요 없음
  • React에서 key는 힌트를 제공할 분 컴포넌트로 전달하지는 않음 ⇒ 다른 컴포넌트에서 필요하다면 다른 이름의 prop으로 명시적으로 전달

// Post 컴포넌트는 props.id로 post.id 값을 받을 수 있지만 props.key는 불가능
const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);

• JSX에 map() 함수를 넣을 수 있지만 너무 중첩될 경우 컴포넌트로 추출할 것 ⇒ 변수로 추출할지 인라인으로 넣을지는 개발자의 선택