[React 숙련] 상세페이지 구현하기 (react-router-dom)

0. 동적 라우팅 (Dynamic Route)

▶ path에 유동적인 값 입력

1.Works.jsx

import React from 'react';

import { Link } from 'react-router-dom';

const data = [

    {

        id: 1,

        todo: '리액트배우기',

    },

    {

        id: 2,

        todo: '노드 배우기',

    },

    {

        id: 3,

        todo: '스프링배우기',

    },

];

//console.log(data);

function Works() {

    return (

        <div>

            {data.map((item) => (

                <div key={item.id}>

                    <div>

                        {item.id}

                        <Link to={`/works/${item.id}`}>{item.todo}</Link>

                    </div>

                </div>

            ))}

        </div>

    );

}

export default Works;

▶ <Link to=''>를 사용 + {`/(절대경로)works / #{item.id}`} -> 하이퍼링크처럼 이동가능

[위치: Router.js]

<Route path="works/:id" element={<Work />} />

▶Router 설정하는 구간에 path : "works/:id"

 

(꿀팁)

[위치: share > data.js]

export const data = [

    {

        id: 1,

        todo: '리액트배우기',

    },

    {

        id: 2,

        todo: '노드 배우기',

    },

    {

        id: 3,

        todo: '스프링배우기',

    },

];

▶ data가 중복으로 써야할때는 js파일로 생성 후 export 하기

▶ 사용할 곳에 import만 해주면 사용가능 

 

2.Work.jsx

import React from 'react';

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

import { data } from '../shared/data';

function Work() {

    const params = useParams();

    //어떤 todo인지찾아보기

    const founddata = data.find((item) => {

        return item.id === +params.id;

    });

    return <div>할 일 : {founddata.todo}</div>;

}

export default Work;

▶ useParam을 통해서 들어온 데이터를 값을 반환 가능

▶ item.id는 숫자형 / params.id는 문자열 => 형변환을 통해 출력하기