Router

• 페이지를 나눠주는 기능(홈페이지, 상세페이지...)

npm install react-router-dom

• 터미널에서 설치 해준다.
• 그후 index.js 와 app.js에 설정해준다.

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

  <React.StrictMode>
      <BrowserRouter>
          <App />
      </BrowserRouter>
  </React.StrictMode>

import { Link, Route, Switch } from 'react-router-dom';
<Route exact path={"/"}></Route>
<Route path={"/detail"}></Route>

• home과 상세페이지로 나누었다.
• Route 태그 안에 자신이 원하는 페이지를 분배해주면 된다.

Link

• 클릭시에 원하는 페이지로 이동시켜주는 기능

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

useHistory

• 어느 버튼에 원하는 페이지 혹은 뒤로가기 기능을 추가하고 싶을때 쓰는 메서드

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

    let history = useHistory();
    
    <button className="btn btn-danger" onClick={
                        ()=>{
                            history.goBack();
                        }

• goBack은 뒤로가기 기능이다.

Switch

• 경로를 통해서 이동할때 매칭되는 Router들을 전부 보여주지 않고 하나만 보여줄때 씀
• Router 부분을 다 감싸면 Route가 매칭이 되어도 맨 위의 Route하나만 보여준다.

SASS

• css를 프로그래밍 적으로 코딩 할수 있게 도와주는 도구

Lifecycle

• 기능의 생애주기를 뜻하는 말이다.
• 이 생애주기 동안에 중간중간 기능을 추가하는데 그것이 Hook 이다.

useEffect

• 중간에 거는 훅중에 하나인데 2초후에 없어지는 창을 만들어보면서 알아본다.

let [alert,alertAlert] = useState(true)

    useEffect(() => {
       let timer = setTimeout(
           ()=>{
            alertAlert(false);
           },2000
       )
    });
    
    {
                alert === true
                    ? <div className={"my-alert2"}>
                        <p>재고가 얼마 남지 않았습니다.</p>
                    </div>
                    : null
            }

• setTimeOut을 활용하면 몇초 후에 콜백함수를 실행시킬 수 있다.
• 이를 활용해서 아래 alert창을 사라지게 할 수 있는 것이다.