React 동적 리스트 컴포넌트

소개

이 랩에서는 DataList 컴포넌트를 사용하여 React 에서 동적 목록 컴포넌트를 만드는 방법을 살펴봅니다. 이 컴포넌트를 사용하면 원시 값의 배열을 정렬된 목록 또는 정렬되지 않은 목록으로 렌더링할 수 있습니다. 랩을 완료하면 React 에서 Array.prototype.map()을 사용하는 방법과 props 에 따라 요소를 조건부로 렌더링하는 방법에 대한 이해도가 높아질 것입니다.

데이터 목록 (Data List)

index.html 및 script.js는 이미 VM 에 제공되었습니다. 일반적으로 script.js 및 style.css에만 코드를 추가하면 됩니다.

이 함수는 원시 값의 배열에서 항목 목록을 렌더링합니다. isOrdered prop 의 값에 따라 정렬된 목록 또는 정렬되지 않은 목록을 조건부로 렌더링하는 데 사용할 수 있습니다. data 배열의 각 항목을 렌더링하기 위해 Array.prototype.map()을 사용하여 각 항목에 대해 고유한 key를 가진 <li> 요소를 생성합니다.

const DataList = ({ data, isOrdered = false }) => {
  const list = data.map((value, index) => (
    <li key={`${index}_${value}`}>{value}</li>
  ));

  return isOrdered ? <ol>{list}</ol> : <ul>{list}</ul>;
};

다음은 이 컴포넌트를 사용하는 방법의 예입니다.

const names = ["John", "Paul", "Mary"];
ReactDOM.createRoot(document.getElementById("root")).render(
  <>
    <DataList data={names} />
    <DataList data={names} isOrdered={true} />
  </>
);

이 예제에서는 이름 배열을 DataList 컴포넌트에 전달하고 두 번 렌더링합니다. 처음에는 정렬되지 않은 목록을 렌더링하고, 두 번째에는 정렬된 목록을 렌더링합니다.

오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! 데이터 목록 (Data List) 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.