inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[React / VanillaJS] UI 요소 직접 만들기 Part 1

기본환경세팅 (1/2) route 설정

gnb 를 이렇게 수정해 봤어여

해결된 질문

639

현석오

작성한 질문수 53

0

gnb 를 이렇게 수정해 봤어여

https://github.com/hyunsokstar/challenge_gnb

 

부모 메뉴일 경우 토글 가능하도록 react 상태와 연동

https://github.com/hyunsokstar/challenge_gnb/blob/main/src/app/Component/ParentGnbItem.tsx

 

zustand 로 현재 active 메뉴 관리

https://github.com/hyunsokstar/challenge_gnb/blob/main/src/app/Component/ChildGnbItem.tsx

 

https://github.com/hyunsokstar/challenge_gnb/blob/main/src/app/%5B...item%5D/stores/isActiveLinkStore.ts

결과:
example.png

이렇게 수정한 방식도 괜찮을까여?

그리고 강의에서 src\app\[...item]\page.tsx 에서 url path를 얻어와서 Next Js 의 파일 기반 페이지 라우팅을 통째로 custom 하는 방식을 사용하는데

 

이런 방식은 Next Js에서 gnb 를 구현 하는 이상적 혹은 보편적인 방법 이라서인지 아니면 강의를 위한 제한적 구현인지 궁금합니다

react typescript dom ui vanilla-js

답변 1

0

정재남

  1. 부모 토글기능 추가: 좋네요. 제가 뭐라고 할 게 있을까 싶습니다 ㅎㅎ

  2. zustand로 active 관리: 이부분은 갸우뚱합니다. 굳이 상태관리가 필요한 영역인지 모르겠군요. url path만으로도 active 상태를 알 수 있으니까요.

  3. routes 구현방식: 저는 gnb의 이상적이거나 보편적인 방식이 무엇인지는 모릅니다. 그저 제 강의 내용에 알맞은 형태를 고안하고 구현한 것 뿐이에요.

강의 난이도에대해서

0

104

1

강의자료 관련 질문

0

64

2

게시판 리스트 만들때 어디부터 use client를 적용할 지 모르겠어요

0

135

1

강의 연장관련

0

174

2

Tooltip-useSyncExternalStore()에 함수 넘기는 방식에 대해...

0

222

3

textarea 에서 body 무한깜빡현성 질문 드립니다.

0

132

2

닫힌 상태에서 문자열은 찾아지는데 열리진 않아요

0

146

2

scrollSpy 바닐라버전에서 data-index를 찾는 코드 질문

0

128

2

[#보일러플레이트 코드 사용법 문의] 강의자료[보일러플레이트] 사용법에 대해서 문의 드려요

0

318

2

무한스크롤 리액트버전 | 16분 31초

0

176

2

강의자료 github link 404 빈페이지

0

263

2

아코디언 (3/6) css transition 추가 부분 max-height 질문

1

417

2

강의 정리에 대한 블로그 정리 글 게시 문의

0

301

1

[아코디언 1/6 챕터] 클로저 활용 질문 있습니다.

2

444

2

item7 style이 강의자료에 없습니다.

0

291

1

이벤트 핸들러가 Root에 모이면

0

304

1

append와 insertAdjacentElement 차이가 무엇일까요?

0

324

1

아코디언 1/6 강좌 클로져 관련 질문입니다.

0

380

1

gnb 만들기를 실무 next js 프로젝트에서 사용할수 있나요?

1

614

2

학습자료 관련해서 질문있습니다.

0

550

1

무한스크롤 강의 관련 질문입니다.

0

311

1

반응형 TextBox 질문입니다.

0

478

1

Tooltip의 useStyleInView 훅 질문입니다.

0

253

1

이벤트에 대한 타입을 지정할 때 궁금한 점이 있습니다.

0

312

1