inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

손에 익는 Next.js - 마이그레이션하기

App Router로 전환하기 2

기존 react 에서 navigate 에 state 로 데이터를 전달했습니다.

해결된 질문

755

이정호

작성한 질문수 1

0

안녕하세요.

현재 react 로 구성되어 있는 프로젝트를 next.js 로 마이그레이션 하기 위해 강의 신청해서 들었습니다.

마이그레이션 도중 질문이 있어서 글 남겨봅니다.

1) 기존 react 에서 navigate 의 state 값으로 전달하던 데이터 들이 있습니다. 전달된 데이터는 location state 로 가져와서 사용했구요.

2) next 12 버전 까지는 query 에 객체를 담아서 보낼수 있고 url 도 as 를 이용해서 제어할 수 있는걸 확인했습니다.

3) 하지만 13버전 이후부터 next/router -> next/navigate 로 변경되면서 query 객체, as 가 삭제되어진 걸로 확인되는데 페이지 이동시 데이터를 전달하러면 url 에 그냥 꼬라박는 방법 뿐인지 질문 드립니다.

react next.js vitejs

답변 1

0

하조은

정호님, 안녕하세요!

useRouter을 활용해 페이지 간 데이터를 전달하는 방법에 대해 질문 주신 것으로 이해했습니다.

 

말씀주신 것처럼 AppRouter를 사용하는 next/navigation에서는 useRouter를 이용해 push를 할 때 URL에 쿼리스트링을 붙여 데이터를 전달하는 것이 유일한 방법이라고 알고 있습니다.

 

데이터를 전달 받은 페이지에선 useSearchParams를 사용해 데이터를 조회하게 되는데 이때 참고하시면 좋을 링크를 하나 첨부해두겠습니다. 마이그레이션에 도움되셨으면 좋겠습니다!

https://github.com/vercel/next.js/discussions/47583#discussioncomment-5449707

 

React를 Next.js로 마이그레이션하는 과정에 또 다른 질문이 있으시다면 언제든 질문 남겨주세요!

감사합니다.

클로드 설치 및 강의 미션 관련

0

9

0

/config Thinking mode 설정

0

11

1

안녕하세요, 강의 수강 중인 학생입니다.

0

10

1

rules 폴더나 CLAUDE.md 파일 관리 관련 질문

0

17

1

서비스 기획 공부와 관련해서

0

15

0

cursor 안에서 다운로드 안되는 게 많은데 대체가 필요할까요

0

37

2

업데이트로 인한 에이전트 생성 변경

0

32

2

starter kit 프로젝트에 prd 문서 만들기

0

45

2

명령어 여러줄 입력방법?

0

43

2

ctrl + 't' 단축어가 안먹어요

0

34

1

클로드코드 계획 보고 방법 알고싶어요.

0

45

2

실무 버전 출시는 언제?

0

44

1

예시 1, 2, 3에서 질문있습니다.

0

43

2

Cursor 프로젝트 목록 및 작업 환경 동기화 문의

0

36

1

파워쉘, 터미널

0

45

2

스킬과 서브에이전트 병행 사용 질문

0

55

2

강의 잘 들었습니다.

0

36

1

claude api 크레딧

0

50

1

터미널에서 커서 AI 직접 실행

0

41

2

해결했습니다

0

39

1

CRA에서 Next.js로 마이그레이션하기에서 compilerOptions.moduleResolution bundler 불가

0

273

1

Create React App에서 Next.js로 마이그레이션하기 의 깃허브 소스도 npm i 하면 에러가 발생합니다.

0

442

2

Cannot find module 에러

0

929

2

fake-commerce-app 주소 404 오류

3

351

1