List & Key

1. List

• JavaScript에서의 리스트 변환

const numbers = [1, 2, 3, 4, 5]; 
const doubled = numbers.map(number => number * 2);
console.log(doubled);

>>> [2, 4, 6, 8, 10]

• React에서의 여러개 컴포넌트 렌더링
  • 엘리먼트 모음을 만들고 중괄호 {} 를 이용해 JSX에 포함시킨다.

const listItems = numbers.map((number) => 
<li key = {number.toString()}>{number}</li>);

ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

• 이 코드는 JavaScript의 map() 함수를 사용하여 numbers 배열을 반복 실행한다.

  • map() : 배열의 모든 값들을 순환 후 새로운 배열을 반환하기 위해 사용

• 기본 리스트 컴포넌트

  • 일반적으로 컴포넌트 안에서 리스트를 렌더링 한다.

const NumberList = (props) => {
            const numbers = props.numbers;
            // key는 DB의 Primary key와 같다.
            const listItems = numbers.map((number, index) => 
						<li key={index}>{number} </li>);
            return (<ul>{listItems}</ul>);
        }

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

2. Key

• React가 어떤 항목을 변경, 추가, 또는 삭제할 지 식별하는 것을 돕는다.
• Key는 엘리먼트에 안정적인 고유성을 보유하기 위해 배열 내부의 엘리먼트에 지정해야 한다. ( DB의 기본키와 비슷)
• Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별 할 수 있는 문자열을 사용하는 것이 가장 좋다.
• 렌더링 한 항목에 안정적인 ID가 없다면 최후의 수단으로 항목의 인덱스를 Key로 사용할 수 있으나 비추한다. (기본 키와 같은 개념이므로)

1. 잘못된 Key 사용법

const ListItem = (props) => {
  const value = props.value;
  return (
    // 틀렸습니다! 여기에는 key를 지정할 필요가 없습니다.
    <li key={value.toString()}>
      {value}
    </li>
  );
}

1. 올바른 Key 사용법

const numbers = [1, 2, 3, 4, 5];
const NumberList = (props) => {
  const numbers = props.numbers;
// key는 DB의 Primary key와 같다.
  const listItems = numbers.map((number, index) =>
    // 맞습니다! 배열 안에 key를 지정해야 합니다.
    <ListItem key={index}>{number}</li>
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);