React 기본 문법- 리스트와 키

다음으로 React 기본 문법 중 "리스트와 키"에 대해 알아보겠습니다.

1. React 기본 문법

React에서는 배열의 각 요소를 렌더링하려면 map() 함수를 사용할 수 있습니다. 그리고 각 요소는 고유한 'key' prop을 가져야 합니다.

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

위의 예시에서 numbers 배열의 각 요소가 <li> 태그로 변환되어 listItems 배열에 저장됩니다. 그리고 이 배열은 <ul> 태그 내부에 렌더링됩니다.

키(key)는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. 따라서 배열 내부의 원소들은 고유한 키를 가져야 합니다.

다음 주제로 넘어가도록 하겠습니다.