react 기초문법

기초문법<2> 여러가지들🍓

---

저번 글과 같이 계속해서 기초 문법을 알아보자.

기초 문법🚩

npm install react-router-dom

페이지를 나누기 위해 위의 코드를 터미널에 치기.

import { BrowserRouter } from 'react-router-dom'

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

src/index.js에서 위와 같이 셋팅해주자

import { Link, Route, Switch } from "react-router-dom";

마지막으로 App.js에 위와깉이 셋팅.

<Route path="/">환영합니다.</Route> // 환영합니다.

<Route path="/bye">조심히 가세요.</Route> //환영합니다. 조심히가세요.



<Route exact path="/">환영합니다.</Route> //환영합니다.

<Route path="/bye">조심히 가세요.</Route> // 조심히 가세요.

그냥 경로만 써놓으면 Route는 같은 경로를 모두 참조하기때문에 ‘exact’를 써주도록 하자.

import React, { useState } from "react";

function Abcd() {
    return();
}

export default Abcd;

component를 다른파일로 만들때는 react를 import하자.

<Nav.Link>
   <Link to="/">Home</Link>   // <link to='경로'>작명</Link>
</Nav.Link>

nav바의 일부분이다. 앞에서 import해온 Link를 사용하는 방법

해당 경로로 url이 바뀐다.

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

function Abcd() {

    let history = useHistory();

    return(

        <button onClick={ ()=> { history.goBack(); }}

    );
}

‘react-router-dom’의 useHistory를 사용하는 방법

버튼을 누르면 뒤로간다. // history.push(‘경로’) 원하는경로로 이동도 된다.

<Switch>
 <Route path='/a'></Routh>
 <Route path='/ab'></Routh>
 <Route path='/abc'></Routh>
 <Route path='/abcd'></Routh>
<Switch>

exact와 비슷한기능을 하지만 Switch는 첫번째로 매칭되는 경로를 가진 컴포넌트를 렌더링시킨다.

ex) /abc ➡️ /a (x) /ab (x) /abc (o)

<Route path="/detail/:id">
  <Detail />
</Route>

‘path=”/detail/:id”‘ ➡️ /detail/afadjovkbsjvlsn 디테일 뒤에 어떤걸 쓰든지 을 보여준다.

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

function Abcd() {

    let { id } = useParams();

    return(

        console.log(id);

    );
}

/detail/5를 주소창에 친다면 5가 출력이된다.