React 리스트와 키

소개

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

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

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

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

이 단계에서는 목록으로 표시하려는 데이터를 정의하는 것부터 시작합니다. 대부분의 애플리케이션에서는 이 데이터가 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}가 추가된 것을 확인하십시오.

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

중요 참고 사항: 항목 순서가 변경될 수 있는 경우 인덱스를 키로 사용하는 것은 권장되지 않습니다. 이는 성능에 부정적인 영향을 미치고 컴포넌트 상태에 문제를 일으킬 수 있습니다. 목록에서 항목을 정렬, 추가 또는 제거하면 인덱스가 변경되어 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 로 동적이고 데이터 기반 애플리케이션을 구축하는 데 필수적입니다.