[16]_react router vs next router

1. react router

function app{

 <Route path='/'>
        <div>메인페이지에요</div>
      </Route>
      <Route path='/detail'>
        <div>디테일페이지에요</div>
      </Route>
}

react router의 경우 이런식으로 작성하게 되고
url에
주소/ ===> 메인페이지에요
주소/detail ===> 메인페이지에요, 디테일페이지에요
라고 화면에 나타남
방지하려면 Route exact path를 입력해 줘야함

2. next router

위의 react router 방식은 매우 비효율적이기 때문에 next router를 쓰면 매우 편리하다

가. 사용법

boards라는 폴더를 만들고(굳이 boards라고 안해도 됨) 하위에 []폴더를 생성(변수역할을 하게 됨)
useRouter 훅을 import 해주고
const router = useRouter()로 선언해줌

router.push(`/boards/${e.target.id}`)

${}안에는 value값 보통 id를 입력하게 됨
예를들어 id가 1이면
router.push가 작동하면 /boards/1로 이동하게 됨
그래서 []폴더에 잘 만들어 두면 두고두고 쓸 수 있음

3. react router vs next router 차이점

react router의 경우도 next router처럼 사용할 수 있다.
하지만 parameter를 입력해야 하고 useParams를 선언하고 값을 불러오고 그 값을 find()의 메서드를 이용해서 찾는 과정이 매우 복잡하기 때문에 next router가 좀더 편리하다고 볼 수 있음.

function ~(props){
let 변수명 = props.~~~.find(function(파라미터명){
  return 파라미터.고유값명(id명 등) == 비교값
});

위와 같이 react router는 사용됨