[React] Route의 리스트의 id 받아오고, 배열.map((x, index) => (...)) 사용법

React Routes는 리액트 기반의 웹 애플리케이션에서 클라이언트 측 라우팅을 관리하기 위한 네비게이션 라이브러리로써

해당 URL에 맵핑을 시키기 위해서 사용한다.

 

## 문제

그러면 보통, 게시글 같은 리스트의 id값을 리스트로 뿌려주게끔 만들었다. 그것을 route로 받고 싶으면 어떻게 할까?

<div className="card-grid">
  {cards.map((card, index) => (
    <Link to={`/card/${card.id}`} key={index} className="card-link">
      <div className="card">
        {card.images?.map((img, i) => (
          <img key={i} src={img.fileUrl} alt={card.title} className="card-image" />
        ))}
        <div className="card-details">
          <h4>{card.title}</h4>
          <p>{card.address}</p>
          <p>{card.hours}</p>
        </div>
      </div>
    </Link>
  ))}

위와 같이 React js파일에서 리스트에 cards에 배열 값을 담아서 각각의 리스트에 card.id의 값을 뿌리게 해주고, 그것을 링크로 가게끔 구현했다. 물론 /card/{cardId}의 백엔드 부분은 구현되어 있다.

 

app.js에서

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

<Routes>
  <Route path="/card/:cardId" element={<CardPage />} /> {/* 카드 상세 페이지 추가 */}
</Routes>

위와 같이 백엔드의 api를 받을 수 있게 즉 react에서 리스트의 각각의 cardId값을 받은 것을 클릭하면 해당 CardPage로 

원하는 것처럼 리스트마다 백엔드에서 담은 데이터 값으로 해당 페이지를 이동할 수 있게 된다.

 

그렇게 하면 CardPage안에서는 useParam을 사용하여 해당 변수에 cardId를 담을 수 있다.

import { useParams } from "react-router-dom";

function CardPage() {
  const { cardId } = useParams(); // URL의 cardId 파라미터 값을 가져옴

  return (
    <div>
      <h1>Card ID: {cardId}</h1>
      {/* cardId를 이용해 카드 상세 정보를 렌더링 */}
    </div>
  );
}

 

 

# 문법 설명

1. cards.map((card, index) => ( ... ))

cards.map은 cards 배열의 각 요소(card)를 순회하면서 새로운 요소로 변환하는 메서드

• card는 cards 배열의 각 요소를 의미하고, index는 배열의 현재 요소 인덱스 번호를 제공
• (card, index) => ( ... )는 화살표 함수로, map 메서드가 순회하는 각 요소를 처리하는 함수를 정의
  이 함수는 JSX를 반환하는데, Link 태그 안에 각 카드의 내용을 렌더링

2. <Link to={/card/${card.id}} key={index} className="card-link">

React Router에서 제공하는 <Link> 컴포넌트로, 클릭 시 지정한 to 경로로 이동함.

• to={/card/${card.id}}: 템플릿 리터럴 문법으로 card.id를 포함하는 문자열을 동적으로 생성해. 예를 들어, card.id가 123이면 to="/card/123"와 같은 경로가 되고.
• key={index}: 리액트는 배열의 각 요소가 고유해야 렌더링 성능을 최적화할 수 있어. key 속성은 각 요소에 고유 식별자를 부여해서 리렌더링을 효율적으로 만들어. 여기서는 index를 사용하고 있음.

3. {card.images?.map((img, i) => ( ... ))}

여기서 card.images 배열이 있을 때만 .map을 사용하도록 ? 연산자를 사용해, Optional Chaining 문법이다.

• map 메서드는 card.images 배열의 각 img 요소에 대해 JSX 코드를 반복 생성함.
• (img, i) => ( ... ): img는 각 이미지 요소이고, i는 인덱스 값.

4. <img key={i} src={img.fileUrl} alt={card.title} className="card-image" />

이 부분은 각 이미지(img)에 대한 img 태그를 생성.

• key={i}: 각 img 태그에 고유한 key를 부여하기 위해 i를 사용.
• src={img.fileUrl}: img 객체의 fileUrl 속성을 src 속성에 할당해서 이미지 경로를 설정.
• alt={card.title}: card.title을 alt 텍스트로 넣어, 이미지를 설명하도록 설정.
• className="card-image": 이미지 스타일링을 위한 클래스.