React 리스트와 키: 동적 리스트 렌더링

소개

React 에서는 데이터 컬렉션에서 여러 개의 유사한 컴포넌트를 표시해야 하는 경우가 많습니다. JavaScript 의 map()과 같은 배열 메서드를 사용하여 데이터 배열을 조작하고 JSX 요소 배열로 변환할 수 있습니다.

"key"는 요소 목록을 생성할 때 포함해야 하는 특별한 문자열 속성입니다. key 는 React 가 어떤 항목이 변경되었는지, 추가되었는지 또는 제거되었는지를 식별하는 데 도움이 됩니다. 이를 통해 React 는 사용자 인터페이스를 효율적으로 업데이트할 수 있습니다.

이 랩에서는 데이터 배열을 가져와 컴포넌트 목록으로 변환하고 렌더링하는 방법을 배우고, key prop 의 중요한 역할도 이해하게 됩니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 95%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

컴포넌트 내 아이템 배열 생성

이 단계에서는 목록으로 표시하려는 데이터를 정의하는 것부터 시작합니다. 대부분의 애플리케이션에서는 이 데이터가 API 또는 데이터베이스에서 오겠지만, 이 랩에서는 컴포넌트 내에서 직접 간단한 배열을 정의할 것입니다.

먼저 올바른 디렉토리에 있는지 확인하십시오. React 애플리케이션 my-app은 /home/labex/project 디렉토리에 생성되었습니다.

WebIDE 왼쪽의 파일 탐색기를 사용하여 my-app/src/App.jsx 파일을 엽니다.

App 컴포넌트 함수 내에서 return 문 앞에 문자열 배열이 될 products라는 상수를 정의합니다.

function App() {
  const products = ["Laptop", "Mouse", "Keyboard", "Monitor"];

  return (
    <>
      <h1>My Product List</h1>
    </>
  );
}

export default App;

이 시점에서 배열은 정의되었지만 아직 렌더링되지 않았습니다. 다음 단계에서는 이 데이터를 표시하는 방법을 보여줍니다.

map 메서드를 사용하여 JSX 요소로 배열 매핑

이 단계에서는 JavaScript 의 map() 메서드를 사용하여 products 배열을 JSX 요소 목록으로 변환합니다. map() 메서드는 원본 배열의 모든 요소에 함수를 호출하여 새 배열을 생성합니다.

각 제품 문자열을 <li> (목록 항목) 요소로 매핑할 것입니다.

src/App.jsx 파일을 수정하십시오. return 문 내에서 매핑 로직을 중괄호 {} 안에 포함시키십시오.

function App() {
  const products = ["Laptop", "Mouse", "Keyboard", "Monitor"];

  const listItems = products.map((product) => <li>{product}</li>);

  return (
    <>
      <h1>My Product List</h1>
      {listItems}
    </>
  );
}

export default App;

이제 프로젝트 종속성을 설치하고 개발 서버를 시작하여 결과를 확인해 보겠습니다.

WebIDE 에서 새 터미널을 엽니다. 먼저 프로젝트 디렉토리로 이동합니다.

cd my-app

다음으로 종속성을 설치합니다.

npm install

마지막으로 개발 서버를 시작합니다. --host 및 --port 플래그는 LabEx 환경 내에서 애플리케이션에 액세스할 수 있도록 하는 데 필요합니다.

npm run dev -- --host 0.0.0.0 --port 8080

서버가 시작된 후 LabEx 인터페이스의 Web 8080 탭으로 전환하십시오. 제품 목록이 표시될 것입니다. 그러나 브라우저의 개발자 콘솔을 열면 (마우스 오른쪽 클릭 -> 검사 -> 콘솔) 다음과 같은 경고가 표시됩니다: Warning: Each child in a list should have a unique "key" prop. 다음 단계에서 이 문제를 해결할 것입니다.

각 리스트 항목에 고유한 key prop 할당

이 단계에서는 각 목록 항목에 고유한 key를 제공하여 콘솔 경고를 수정합니다. 키는 React 가 각 항목의 식별자를 추적하는 데 중요하며, 데이터가 변경될 때 목록을 효율적으로 다시 렌더링하는 데 도움이 됩니다.

키를 선택하는 가장 좋은 방법은 형제 항목 중에서 목록 항목을 고유하게 식별하는 문자열을 사용하는 것입니다. 대부분의 경우 데이터의 ID 를 사용하게 됩니다.

데이터를 각 객체에 고유한 id가 있는 객체 배열로 수정해 보겠습니다. src/App.jsx를 다음과 같이 업데이트합니다. 각 제품의 id를 키로 사용할 것입니다.

function App() {
  const products = [
    { id: "p1", name: "Laptop" },
    { id: "p2", name: "Mouse" },
    { id: "p3", name: "Keyboard" },
    { id: "p4", name: "Monitor" }
  ];

  const listItems = products.map((product) => (
    <li key={product.id}>{product.name}</li>
  ));

  return (
    <>
      <h1>My Product List</h1>
      {listItems}
    </>
  );
}

export default App;

<li> 요소에 key={product.id} prop 이 추가된 것을 확인하십시오. 키는 React 에서 내부적으로 사용하는 특별한 prop 이며 컴포넌트로 전달되지 않습니다.

파일을 저장한 후 Web 8080 탭과 개발자 콘솔을 다시 확인하십시오. 목록은 이전과 같이 렌더링되어야 하지만, 키 누락에 대한 경고는 사라졌을 것입니다.

고유 ID 가 없을 경우 index 를 key 로 사용

이 단계에서는 데이터에 안정적이고 고유한 ID 가 없는 상황을 처리하는 방법을 배웁니다. 이러한 경우 배열의 항목 인덱스를 최후의 수단으로 사용할 수 있습니다.

map() 함수는 현재 항목의 인덱스를 선택적 두 번째 인수로 제공합니다. 이 인덱스를 키로 사용할 수 있습니다.

products 배열을 문자열의 간단한 배열로 되돌리고 인덱스를 키로 사용해 보겠습니다. src/App.jsx를 수정합니다.

function App() {
  const products = ["Laptop", "Mouse", "Keyboard", "Monitor"];

  const listItems = products.map((product, index) => (
    <li key={index}>{product}</li>
  ));

  return (
    <>
      <h1>My Product List</h1>
      {listItems}
    </>
  );
}

export default App;

<li> 요소에 key={index}가 추가된 것을 확인하십시오.

중요 참고 사항: 항목 순서가 변경될 수 있는 경우 인덱스를 키로 사용하는 것은 권장되지 않습니다. 이는 성능에 부정적인 영향을 미치고 컴포넌트 상태에 문제를 일으킬 수 있습니다. 목록에서 항목을 정렬, 추가 또는 제거하면 인덱스가 변경되어 React 의 렌더링 알고리즘을 혼란스럽게 할 수 있습니다. 목록이 정적이고 순서가 변경되지 않는 경우에만 사용하십시오.

ul 또는 ol 태그 안에 매핑된 리스트 렌더링

이 단계에서는 목록 항목을 <ul> (순서 없는 목록) 또는 <ol> (순서 있는 목록) 태그로 감싸게 됩니다. 이는 접근성 및 SEO 에 좋은 의미론적으로 올바른 HTML 을 만드는 데 중요합니다.

현재 프래그먼트 (<>...</>) 안에 일련의 <li> 요소를 직접 렌더링하고 있습니다. listItems 변수를 <ul> 태그로 감싸서 올바른 순서 없는 목록을 만들어 보겠습니다.

src/App.jsx를 최종 코드로 업데이트하십시오.

function App() {
  const products = ["Laptop", "Mouse", "Keyboard", "Monitor"];

  const listItems = products.map((product, index) => (
    <li key={index}>{product}</li>
  ));

  return (
    <>
      <h1>My Product List</h1>
      <ul>{listItems}</ul>
    </>
  );
}

export default App;

이제 Web 8080 탭으로 돌아가십시오. 표준 HTML <ul> 요소에서 예상되는 대로 목록이 글머리 기호로 올바르게 형식화된 것을 볼 수 있습니다. 올바른 키와 의미론적 HTML 을 사용하여 React 에서 동적 목록을 성공적으로 렌더링했습니다.

요약

실습을 완료하신 것을 축하드립니다!

이 실습에서는 React 에서 목록을 렌더링하는 기본 개념을 배웠습니다. 다음을 실습했습니다.

컴포넌트 내에서 데이터 배열 정의하기.
map() 메서드를 사용하여 데이터 배열을 JSX 요소 배열로 변환하기.
React 의 효율적인 렌더링을 돕기 위한 목록 항목의 key prop 의 중요성.
데이터의 안정적이고 고유한 ID 를 키로 사용하는 방법.
배열 인덱스를 최후의 수단으로 키로 사용하는 방법과 그렇게 할 때 발생할 수 있는 단점.
의미론적 HTML 을 위해 목록 항목을 <ul> 또는 <ol>로 감싸는 방법.

이러한 기술은 React 로 동적이고 데이터 기반 애플리케이션을 구축하는 데 필수적입니다.