밸~하!

밸로그여러분 안녕하세요!

오늘은 React-router 와 Next-router
에대해서 알아보겠습니다!

먼저 next.js와 react의 차이는 무엇일까요??

Next.js는 react의 라이브러리지만
리액트보다 더욱 다양한 기능을 편리하게 제공을 하고 있습니다
이것으로 인해
같은 메서드라도 react에서 import를 했는지 아니면 Next에서 import를 했는지에 따라서 차이가 있는데요!

react에서는 react-router-dom라이브러리를 통해 페이지간 라우팅을 구현할수 있습니다!
그러나
Next.js에서는 pages 폴더 안에 컴포넌트를 생성하면 자동으로 경로가 설정이 됩니다!
그래서 next.js는 pages 폴더 안에 index와 tomato라는 컴포넌트가 있을때 별도의 라우팅이 없이 /tomato를 사용해 그 경로에 접근할수 있습니다

그럼 라우팅에는 어떤종류가 있는지 알아볼까요??

1.정적 라우팅

정적라우팅은 사전에 지정된 주소로 이동하는방법입니다!

react와 같이 next에서도 Link컴포넌트를 사용해서 주소를 이동할수 있습니다
link컴포넌트는 href로 이동할 경로를 지정해줄수가 있는데요
중요한것을 link컴포넌트를 사용하면 새로운 페이지로 이동후 뒤로가기를 하여도 한번 렌더링 된 페이지를 다시 컴파일 하지 않는다는 장점이 있습니다!

그다음은 동적 라우팅입니다!

2.동적 라우팅

사전에 지정된 주소로 정적라우팅을 봤었는데요
이번엔 사전에 주소를 지정하지않아도 동적으로 라우팅할수있는것에 대해서 알아보겠습니다

폴더명을 []로 감싸면 해당폴더는 동적으로 경로가 지정되는 페이지가 됩니다!
사용은
[]가 존재하는 경로에 임의의 주소를 대입하게되면 대입한 주소를 쿼리명으로 갔는 페이지로 이동할수가 있습니다

자 이렇게 정적라우팅과 동적라우팅에 대해서 알아보았는데요
Next와 react의 라우팅방식의 차이는
next에서는 useRouter라는 객체를 router라는것으로 지정하여서
그안의 key값들을 사용할수가있는데요
react와는 다르게 감싸줄 필요없이 객체의 키값으로만 접근할수있어서 코드를 읽는데 있어서 조금더 편리하고 간편하게 읽을수가 있게됬습니다!

자 오늘은 간단하게 react router 와 nextrouter에 대해서 알아보았는데요

더 자세한 내용은 Next.js페이지

https://nextjs.org/
next 공식홈페이지

를 참고해주시면 좋을것같습니다!

그럼 오늘도 이만
밸~바!