여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. React - 목록
React – 목록
4개월전 작성
5개월전 수정

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
밍구
공부 목적 블로그