기존 react 에서 navigate 에 state 로 데이터를 전달했습니다.
안녕하세요.
현재 react 로 구성되어 있는 프로젝트를 next.js 로 마이그레이션 하기 위해 강의 신청해서 들었습니다.
마이그레이션 도중 질문이 있어서 글 남겨봅니다.
1) 기존 react 에서 navigate 의 state 값으로 전달하던 데이터 들이 있습니다. 전달된 데이터는 location state 로 가져와서 사용했구요.
2) next 12 버전 까지는 query 에 객체를 담아서 보낼수 있고 url 도 as 를 이용해서 제어할 수 있는걸 확인했습니다.
3) 하지만 13버전 이후부터 next/router -> next/navigate 로 변경되면서 query 객체, as 가 삭제되어진 걸로 확인되는데 페이지 이동시 데이터를 전달하러면 url 에 그냥 꼬라박는 방법 뿐인지 질문 드립니다.
답변 1
0
정호님, 안녕하세요!
useRouter을 활용해 페이지 간 데이터를 전달하는 방법에 대해 질문 주신 것으로 이해했습니다.
말씀주신 것처럼 AppRouter를 사용하는 next/navigation에서는 useRouter를 이용해 push를 할 때 URL에 쿼리스트링을 붙여 데이터를 전달하는 것이 유일한 방법이라고 알고 있습니다.
데이터를 전달 받은 페이지에선 useSearchParams를 사용해 데이터를 조회하게 되는데 이때 참고하시면 좋을 링크를 하나 첨부해두겠습니다. 마이그레이션에 도움되셨으면 좋겠습니다!
https://github.com/vercel/next.js/discussions/47583#discussioncomment-5449707
React를 Next.js로 마이그레이션하는 과정에 또 다른 질문이 있으시다면 언제든 질문 남겨주세요!
감사합니다.
스니펫이 이상해요
0
10
2
/output-style 명령어는 폐기 되었다고 나오네요.
0
14
1
프롬프트 작성시 html, css, javascript
0
10
1
강의영상 버퍼링
0
16
3
Editor Component의 최적화 불가능 이슈
0
17
2
Cursor 창이 수업 내용과 달라요.
0
16
2
Supabase MCP 관련 질문입니다
0
14
1
에러핸들링- rootlayout에 관하여
0
11
2
useCallback ⊂ useMemo
0
22
2
강의 내용 누락
0
15
0
클로드 로그인 후 승인창이 안떠요
0
29
1
깃허브 저장소를 어디에 첨부하셨나요?
1
30
1
61강 claude.local.md 변경사항 관련 질문
0
33
3
스타터 저장소
1
33
1
라이브러리 설치 질문
0
28
2
linter 질문
0
33
2
DESIGN.md 파일이 잘못되었어요
1
34
1
github
0
38
2
react-fetch -2 (loading) 에러
0
36
2
Claude에서 Bash, PowerShell 커맨드 묻기
0
42
2
CRA에서 Next.js로 마이그레이션하기에서 compilerOptions.moduleResolution bundler 불가
0
263
1
Create React App에서 Next.js로 마이그레이션하기 의 깃허브 소스도 npm i 하면 에러가 발생합니다.
0
427
2
Cannot find module 에러
0
910
2
fake-commerce-app 주소 404 오류
3
346
1