#05 리액트 숙련 : 투두리스트의 상세페이지 연결하기(성공)

0. 어제 실패한 상세페이지 연결 😢😢

#04 리액트 숙련 : 투두리스트의 상세페이지 연결하기

 

1. 오늘 연결된 상세페이지 😊😊

[어제 연결이 이상했던 이유]

▶우선 home 화면을 제대로 설정하지 않았음. + App.jsx에서 바로 진행하려고 했음.

▶ react router dom의 사용법 미숙

 

[구현 정리]

1. App.jsx에서 <Router>로 구성하기

2. Home.jsx를 보여주고 싶은 메인화면으로 구성하기

3. (컴포넌트) Contents.jsx 내에서 <Link to = 'detail2 / id값'>으로 해서 각 id마다 상세포기 페이지 연결

---

 

 

(1) App.jsx

import './App.css';

import Router from './share/Router';

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

function App() {

    return (

        <>

            <Router></Router>

        </>

    );

}

export default App;

▶ 아래 정의해놓은 <Router> 사용

 

(2) Router.js

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

import Detail from '../pages/Detail';

import Home from '../pages/Home';

import Detail2 from '../pages/Detail2';

const Router = () => {

    return (

        <BrowserRouter>

            <Routes>

                <Route path="/" element={<Home />}></Route>

                <Route path="detail" element={<Detail />}></Route>

                <Route path="detail2/:id" element={<Detail2 />}></Route>

            </Routes>

        </BrowserRouter>

    );

};

export default Router;

▶ 기본 화면은 <Home> / 상세페지이는 <Detail2>로 진행 : id값에 따라 다른 페이지로 이동 (다이나믹)

 

(3) Home.jsx

import React from 'react';

import uuid from 'react-uuid';

import { useState } from 'react';

import Input from '../components/Input';

import Contents from '../components/Contents';

import styled from 'styled-components';

function Home() {

    const stBox = styled.div`

        width: 100px;

        height: 100px;

        border: 1px solid red;

        margin: 20px;

    `;

    const ininiatlState = [

        { id: uuid(), title: '제목1', contents: '내용1', isDone: false },

        { id: uuid(), title: '제목2', contents: '내용2', isDone: true },

        { id: uuid(), title: '제목3', contents: '내용3', isDone: false },

    ];

    const [todos, setTodos] = useState(ininiatlState);

    return (

        <>

            <header></header>

            <main>

                <stBox>

                    <Input todos={todos} setTodos={setTodos} />

                </stBox>

                <Contents todos={todos} setTodos={setTodos} isDone={false} />

                <Contents todos={todos} setTodos={setTodos} isDone={true} />

            </main>

            <footer></footer>

        </>

    );

}

export default Home;

▶ Styled-components를 이용해 구현하려다가 잘 안 되서 이건 다시 공부해야할 듯하다!

▶ 기본 페이지 (Home)에서 컴포넌트(Input,  Contents) 가져와서 메인 페이지 그리기

 

 

(4) Detail.jsx

import React from 'react';

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

function Detail() {

    const params = useParams();

    const navigate = useNavigate();

    return (

        <div>

            세부사항

            <button

                onClick={() => {

                    navigate('/');

                }}

            >

                {' '}

                home 이동{' '}

            </button>

        </div>

    );

}

export default Detail;

▶ 여기는 상세페이지 들어가서 다시 메인페이지로 이동하는 버튼을 구현했음

▶ 추후, Detail2 페이지에 합칠 기능으로 테스트 했는데 잘 되었음!

 

 

끝.