useNavigate()

: 페이지 이동시 사용, 뒤로가기 안되게 가능 ⇒ {replace: true}를 넣어줘서

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

function HomePage() {

  const navigate = useNavigate();

  const onPageNavigate = () => {
    // window.location.href = "/login" : 페이지를 다시 불러옴, 마치 a태그와 같음
    navigate("/todo", {replace: true})
  }

  return (
  <div>
    <div onClick={onPageNavigate}>홈 페이지입니다.</div>
    <Link to="/todo/123">
      <button>투두로 이동</button>
    </Link>
    <a href="/todo/123">
      <button>투두로 이동</button>
    </a>
  </div>
  )
}
export default HomePage;

Styled-components

reset 라이브러리 설치

npm i styled-reset

createGlobalStyle

[전역 스타일링]

src > styles > global.js

import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset'

const GlobalStyles = creatGlobalStyle`
	${reset}
`

[자주 쓰는 스타일들..]

src > styles > keyframe.js

import { keyframes } from 'styled-components'

export const spin = keyframes`
	to {
		transform: rotate(360deg)
	}
`