Day10_react(5)_Am

router 쓰기

428p

josn =>

 

App.js

import './App.css';

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

import Diary from './pages/Diary';

import New from './pages/New';

import Home from './pages/Home';

import Notfound from './pages/Notfound';

function App() {

  return (

    <div className="App">

      <Link to={"/"}>Home</Link>

      <Link to={"/new"}>New</Link>

      <Link to={"/Diary"}>Diary</Link>

      <br/><br/>

      <a href='/'>[a tag Home]</a>

      <a href='/new'>[a tag new]</a>

      <a href='/dairy'>[a tag dairy]</a>

     

      <h1>App page</h1>

        <Routes>

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

          <Route path='/new' element = {<New/>}/>

          <Route path='/diary/:id' element = {<Diary/>}/>

          <Route path='*' element={<Notfound/>} />

        </Routes>

    </div>

  );

}

export default App;

a href 는 새로 읽어드리는것 = 다른주소를 가져오는것이고

Navigate 는 내부에 있는 링크르 가져오는것

 

 

 

Diary

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

const Diary = () => {

    const params = useParams

    console.log(params)

   

    return (

        <div>

            <h1>{params.id}번 일기입니다.</h1>

        </div>

    )

};

export default Diary;

 

New

const New = () => {

    return (

        <div>

            <h1>새 일기장 만들기</h1>

        </div>

    );

};

export default New

 

Notfound

const New = () => {

    return (

        <div>

            <h1>새 일기장 만들기</h1>

        </div>

    );

};

export default New

 

home

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

const Home = () => {

    const [params, setParams] = useSearchParams();

    console.log(params);

    console.log(params.get('name'))

    console.log(params.get('value'))

   

    return (

        <div>

            홈 페이지

        </div>

    )

};

export default Home;

 

---

 

폰트 및 이미지 삽입

 

index.css

 

@font-face {

    font-family: 'NanumPenScript';

    src: url('./assets/fonts/NanumPenScript-Regular.ttf');

}

body *{

    font-family: 'NanumPenScript';                              

}

 

이미지 추가

import './App.css';

import emotion1 from './assets/emotion1.png'

import emotion2 from './assets/emotion2.png'

import emotion3 from './assets/emotion3.png'

import emotion4 from './assets/emotion4.png'

import emotion5 from './assets/emotion5.png'

function App() {

  return (

    <div className="App">

      <h1>app page입니다.</h1>

      <img src={emotion1}/>

      <img src={emotion2}/>

      <img src={emotion3}/>

      <img src={emotion4}/>

      <img src={emotion5}/>

    </div>

  );

}

export default App;

 

 

다른방법

 

get-emotin-image.js

import emotion1 from './../assets/emotion1.png'

import emotion2 from './../assets/emotion2.png'

import emotion3 from './../assets/emotion3.png'

import emotion4 from './../assets/emotion4.png'

import emotion5 from './../assets/emotion5.png'

export function getEmotionImage(emotionId){

    switch (emotionId){

        case 1:

            return emotion1;

        case 2:

            return emotion2;

        case 3:

            return emotion3;

        case 4:

            return emotion4;

        case 5:

            return emotion5;

    }

}

 

App.js

import './App.css';

import { getEmotionImage } from './util/get-emotion-image';

function App() {

  return (

    <div className="App">

      <h1>app page입니다.</h1>

      <img src={getEmotionImage(1)}/>

      <img src={getEmotionImage(2)}/>

      <img src={getEmotionImage(3)}/>

      <img src={getEmotionImage(4)}/>

      <img src={getEmotionImage(5)}/>

    </div>

  );

}

export default App;

 

F12

이미지가 적을때는 여기다가 적용하는게 좋음

캐시로 되기 때문에 다시 불러오지 않고 바로바로 뜸

 

---

감정 일기장 만들기

App.js

import './App.css';

import Dairy from './pages/Diary';

import New from './pages/New';

import Home from './pages/Home';

import Notfound from './pages/Notfound';

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

function App() {

  return (

    <div className="App">

      <h1>app page 입니다.</h1>

      <Routes>

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

        <Route path='/new' element={ <New/> }/>

        <Route path='/diary/:id' element={ <Dairy/> }/>

        <Route path='*' element={ <Notfound/> }/>

      </Routes>

    </div>

  );

}

export default App;

 

Diary.js

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

const Dairy = () => {

    const params = useParams();

    console.log(params)

    return (

        <div>

            <h1>{params.id}번째 다이어리</h1>

        </div>

    )

};

export default Dairy;

 

Home.js

import Button from "../components/Button";

const Home = () => {

    return (

        <>

            <div>홈페이지</div>

            <Button

                text={"123"}

                type="POSITIVE"

                onClick={() => {

                    console.log('123버튼 positive 클릭')

                }}

           

            />

            <Button

                text={"124"}

                type="NEGATIVE"

                onClick={() => {

                    console.log('124버튼 negative 클릭')

                }}

            />

             <Button

                text={"125"}

                onClick={() => {

                    console.log('125버튼 클릭')

                }}

            />

        </>

    )

};

export default Home;

 

New.js

const New = () => {

    return (

        <div>

            <h1>new</h1>

        </div>

    )

}

export default New;

 

Button.js

const New = () => {

    return (

        <div>

            <h1>new</h1>

        </div>

    )

}

export default New;

 

Button.css

.Button {

    background-color: rgb(236, 236, 236);

    cursor: pointer;

    border: none;

    border-radius: 5px;

    padding: 10px 20px;

    font-size:  18px;

    white-space: nowrap;

}

.Button_POSITIVE {

    background-color: rgb(100, 201, 100);

    color: white;

}

.Button_NEGATIVE {

    background-color:  rgb(253, 86, 95);

    color: white;

}

 

현 결과

70

 

 

---