ENG
더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.
React 프레임워크 nextjs에서 페이지 이동하는 다양한 방법과 예제를 알아봅니다.
# nextjs 페이지 이동하는 방법
nextjs에는 SSR(Server Side Rendering)을 목적으로 많이 사용되므로 링크 이동시 두 가지 방법이 사용됩니다.
아래에서 각각 알아봅니다.
! 서버 사이드 방식의 페이지 이동, nextjs
여기서 두 번째에 해당하는 SSR 방식은 일반적인 자바스크립트 코드나 a 태그를 사용하는 방법을 그대로 사용하는 것입니다.
자바스크립트를 사용할 수도 있죠.
다음으로 서버사이드렌더링 방식이 아닌 라우팅을 사용한 state를 변경하는 방법을 알아봅니다.
! state(스테이트) 변경의 비동기식 페이지 이동하기
nextjs에서는 Router API를 사용하여 페이지 이동이 가능합니다. 먼저 필요한 모듈을 추가합니다.
이제 페이지를 이동하기 위해서 Router 메소드인 push()를 사용합니다. 간단한 사용법은 아래와 같습니다.
Router.push(이동할 경로 또는 옵션)
이 경우 인자를 문자 또는 객체로 넘겨줄 수 있는데 문자로 넘겨줄 경우 이동할 경로를 입력하면 됩니다. 예를들어 /test로 이동을 원한다면 아래와 같을 것입니다.
이제 페이지는 /test로 이동하게 될 것입니다.
@ 주소에 쿼리스트링 사용하는 페이지 이동
만약 페이지를 이동할 때 현재 또는 다른 페이지에 쿼리 스트링을 사용하려면 어떻게 할까요? 이 경우 이동할 주소 pathname과 query를 분리하여 사용하는 것이 가능합니다. 아래를 봐주세요.
보시는 것처럼 push에 사용한 인자를 pathname, query 구분하여 사용하였습니다.
! useRouter 또는 withRouter 사용하기
useRouter는 함수형 컴포넌트에서 사용할 수 있는 state hook 방식의 방법입니다.
(모두 추후 업데이트 예정입니다.)
여기까지 nextjs에서 SSR 또는 state Router 방식의 페이지를 이동하는 방법을 알아보았습니다.
# nextjs 페이지 이동하는 방법
nextjs에는 SSR(Server Side Rendering)을 목적으로 많이 사용되므로 링크 이동시 두 가지 방법이 사용됩니다.
- state 변경의 비동기 이동 방식
- 서버 사이드 렌더링(SSR) 방식의 페이지 이동
아래에서 각각 알아봅니다.
! 서버 사이드 방식의 페이지 이동, nextjs
여기서 두 번째에 해당하는 SSR 방식은 일반적인 자바스크립트 코드나 a 태그를 사용하는 방법을 그대로 사용하는 것입니다.
<a href="/test">Move</a>
자바스크립트를 사용할 수도 있죠.
window.open('/test', '_self');
다음으로 서버사이드렌더링 방식이 아닌 라우팅을 사용한 state를 변경하는 방법을 알아봅니다.
! state(스테이트) 변경의 비동기식 페이지 이동하기
nextjs에서는 Router API를 사용하여 페이지 이동이 가능합니다. 먼저 필요한 모듈을 추가합니다.
import Router from 'next/router';
이제 페이지를 이동하기 위해서 Router 메소드인 push()를 사용합니다. 간단한 사용법은 아래와 같습니다.
Router.push(이동할 경로 또는 옵션)
이 경우 인자를 문자 또는 객체로 넘겨줄 수 있는데 문자로 넘겨줄 경우 이동할 경로를 입력하면 됩니다. 예를들어 /test로 이동을 원한다면 아래와 같을 것입니다.
const targerPage = '/test';
Router.push(targerPage);
Router.push(targerPage);
이제 페이지는 /test로 이동하게 될 것입니다.
@ 주소에 쿼리스트링 사용하는 페이지 이동
만약 페이지를 이동할 때 현재 또는 다른 페이지에 쿼리 스트링을 사용하려면 어떻게 할까요? 이 경우 이동할 주소 pathname과 query를 분리하여 사용하는 것이 가능합니다. 아래를 봐주세요.
Router.push({
pathname: '/test',
query: { sitename: 'webisfreecom' }
})
pathname: '/test',
query: { sitename: 'webisfreecom' }
})
보시는 것처럼 push에 사용한 인자를 pathname, query 구분하여 사용하였습니다.
! useRouter 또는 withRouter 사용하기
useRouter는 함수형 컴포넌트에서 사용할 수 있는 state hook 방식의 방법입니다.
(모두 추후 업데이트 예정입니다.)
여기까지 nextjs에서 SSR 또는 state Router 방식의 페이지를 이동하는 방법을 알아보았습니다.
[react] antd 라이브러리 Input 컴포넌트
