React

목록

React에서는 일종의 루프를 사용하여 목록을 렌더링한다.

일반적으로 JavaScript map()배열 방법이 선호된다.

예제

차고에서 모든 차를 렌더링해보자.

function Car(props) {
  return <li>I am a { props.brand }</li>;
}

function Garage() {
  const cars = ['Ford', 'BMW', 'Audi'];
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <ul>
        {cars.map((car) => <Car brand={car} />)}
      </ul>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);

⭐ create-react-app에서 이 코드를 실행하면 작동하지만 목록 항목에 대해 “키”가 제공되지 않는다는 경고가 표시된다.

예제

키

키를 사용하면 React가 요소를 계속 추적할 수 있다.
이렇게 하면 항목이 업데이트되거나 제거되면 전체 목록 대신 해당 항목만 다시 렌더링된다.

키는 형제마다 고유해야 한다.
하지만 전 세계적으로 복제할 수 있다.

⭐ 일반적으로 키는 각 항목에 할당된 고유 ID여야 한다. 마지막 수단으로 배열 인덱스를 키로 사용할 수 있다.

예제

키를 포함하도록 이전 예제를 재구성해 보자.

function Car(props) {
  return <li>I am a { props.brand }</li>;
}

function Garage() {
  const cars = [
    {id: 1, brand: 'Ford'},
    {id: 2, brand: 'BMW'},
    {id: 3, brand: 'Audi'}
  ];
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <ul>
        {cars.map((car) => <Car key={car.id} brand={car.brand} />)}
      </ul>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기