나만의 홈페이지 만들기-08 [카드리스트&디테일페이지]

이전 마스트페이지와 라우트 설명에서 이제는 카드 리스트에서 상세 페이지로 링크되는 컴포넌트를 추가해보자.

지금까지 소스는 아래 깃허브 링크에 있다.

https://github.com/JahvoTrust/myweb

GitHub - JahvoTrust/myweb

나도 공부하면서 하는 코드라 조언해주실분은 꼭 댓글에 남겨주기 바란다.^^

아래 처럼 카드리스트를 컴포넌트로 분리한다.

import React from 'react'
import Card from 'react-bootstrap/Card';
import Col from 'react-bootstrap/Col';
import { useNavigate } from "react-router-dom";
import './CardList.css'

export default function CardList({ list }) {
    const navigate = useNavigate();

    const handleCardClick = () => {
        navigate(`/carddetail/${list.uuid}`);
    }

    return (
        <Col key={list.uuid}>
            <Card >
                <a className="card-img-link" onClick={handleCardClick} >
                    <Card.Img variant="top" src={list.displayIcon} />
                </a>
                <Card.Body>
                    <Card.Title>{list.displayName}</Card.Title>
                    <Card.Text>
                        {list.category}
                    </Card.Text>
                </Card.Body>
                <Card.Footer>
                    <small className="text-muted">Last updated 3 mins ago</small>
                </Card.Footer>
            </Card>
        </Col>

    )
}

이코드에서는 useNavigate 를 사용하여 상세 페이지로 이동할 것이다. useNavigate를 사용하기 위해서는 react-router-dom를 npm 을 이용하여 설치해야한다. 여기서 중요한 내용은 /carddetail/${list.uuid} 이 부분이다. list를 넘겨받은 것중에 상세 페이지에 uuid 값을 넘기기 위해서 위처럼 useNavigate 에서 지정해준다.

이제 넘겨받은 파라미터를 받는 방법을 알아보자. 아래는 상세 페이지이다.

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

function Carddetail() {
    let { id } = useParams();

    return (
        <div>Carddetail {id}</div>
    )
}

export default Carddetail

상사페이지에서는 useParams 을 사용하여 이전 컴포넌트에서 넘겨준 파라미터를 받을 수 있다.

App.js 에서 아래처럼 Route 를 설정해야 한다.

function App() {
  return (
    <Layout>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<MainContent />}/>
          <Route path="/profile" element={<Profile />} />
          <Route path="/carddetail/:id" element={<Carddetail />} />
        </Routes>
      </BrowserRouter>
    </Layout>
  );
}

마스터 페이지와 라우터는 

https://jahvo.tistory.com/entry/%EB%82%98%EB%A7%8C%EC%9D%98-%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A7%8C%EB%93%A4%EA%B8%B0-07-%EB%A7%88%EC%8A%A4%ED%84%B0%ED%8E%98%EC%9D%B4%EC%A7%80%ED%8E%98%EC%9D%B4%EC%A7%80Route

나만의 홈페이지 만들기-07 [마스터페이지&페이지Route]

이 페이지를 참고하면된다.

지금 까지 전체 소스는 아래 깃허브 저장소를 참고하면된다.

https://github.com/JahvoTrust/myweb

GitHub - JahvoTrust/myweb