반응형 개념공부/Next.js2 [Next.js] router, Link, a - page 이동 방법 tag 보다시피 브라우저가 다른 페이지로 보내기 위해 전체 페이지를 새로고침 하게된다. 이렇게 되면 페이지가 느려지고, SPA의 장점을 이용하지 못하게 된다. 그럼 해결방안은? Link Link태그를 사용해야한다. Link태그는 next.js에서 next/link 안에 들어있는 기능이다. 를 넣어주면 된다. 이처럼 새로고침이 안일어나고 페이지 이동이 되는것을 볼 수있다. useRouter hook 그럼 a태그는 어디에 사용하는 것일까? Link태그 말고도 next.js의 useRouter를 이용하여 페이지를 이동 시킬 수 있다. 하지만 아래에서는 next.js에서 a태그를 사용하는 것을 보여주겠다. a태그는 link를 연결하는 것이 아닌 Link 태그에서 적용 시킬 수 없는 style이나 classNam.. 2022. 3. 17. [Next.js] Client-side Render 와 Static Pre Render (feat.Library 와 Framework ) React.js 는 Library React router DOM을 설치해야하고, router를 설정하고, 만들고, 설계하고 component를 import 해야한다. Next.js는 Framework 코드를 정해진 적절한 곳에 작성을 하면 코드를 불러와서 모든걸 동작하게 하는 것 특정한 규칙이 있어서 그것을 따라 코드를 작성해야 제대로 동작한다. React router DOM을 설치해야하고, router를 설정하고, 만들고, 설계하고 component를 import 할 필요가 없다. Next.js 란? - pages에서 name으로 router를 처리할 수 있다. - jsx를 사용하기위해 따로 React를 import 할 필요가 없다. useState나 useEffect를 사용하기 위해서는 필요하다. N.. 2022. 3. 17. 이전 1 다음
