ch02.Key

• key는 컴포넌트 배열을 렌더링 했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용한다.
• 키가 없을 경우에는 VirtualDOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지
• 키가 있을경우 이 값을 사용하여 더욱 빠르게 어떤 변화가 있었는지를 감지할 수 있다.
• key값을 설정할 때에는 map 함수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하듯이 설정하면 된다.
  • example

  • const articleList = articles.map(article => (
    	<Article
        	title = {article.title}
            writer = {article.writer}
            key = {article.key}
         />
    );

    게시판을 게시물 번호를 key로 설정하면 된다.
  • 만약 고유번호가 없는 반복적인 컴포넌트일 경우 map함수에 전달되는 콜백함수의 인수인 index값을 사용한다.

  • import react from "react";
    const IterationSample = () => {
      const names = ["눈사람", "얼음", "눈", "바람"];
      const nameList = names.map((name, index) => <li key={index}>{name}</li>);
      return <ul>{nameList}</ul>;
    };
    export default IterationSample;

    이전에 발생한 경고 메시지가 더 이상 출력되지 않는다.
  • 단, index를 key값으로 사용하면 배열이 변경될 때 효율적으로 렌더링 하지 못한다.