inflearn logo
강의

Khóa học

Chia sẻ kiến thức

Học mã hóa bản sao YTMusic Next từ những điều cơ bản (với next.js 14, UI Master)

10.2 HeaderBgChanger

changer라는 컴포넌트를 사용하는 이유

Đã giải quyết

281

kal65296221

11 câu hỏi đã được viết

1

HeaderBgChanger라는 컴포넌트는 단순히 서버 컴포넌트에서 react hook을 사용할 수 없기 때문에 만드는 컴포넌트인지 궁금합니다.

또 이렇게 컴포넌트를 만들 경우에 렌더링 될 때 영향을 주는 부분은 없는지 궁금합니다.

react 인터랙티브-웹 클론코딩 next.js tailwind-css zustand

Câu trả lời 2

1

kal65296221

답변 감사드립니다!

1

dodocoding

1) 배경화면 변경은 기본적으로 클라이언트 사이드 로직 처리 입니다.

  • HeaderBgChanger 는 클라이언트단에서 배경 변경 처리를 위해서 만든 컴포넌트 입니다.

  • zustand 의 전역 상태에 대응하기 위해 클라이언트 컴포넌트로 작성했어요.

  • 이를 구현하기 위해 hook을 사용했죠.

  • 하지만, 이슈가 있죠. 바로 초기 디폴트 배경화면이 보였다가 useEffect에 의해 변경됩니다.

2) 위 한계점을 서버 컴포넌트에서 처리 가능합니다. ( next.js 라서 가능한거죠.)

  • 워크북에 있는 미션 내용중 하나 입니다. 참고해주세요.!

  • ServerSide에서 초기 이미지 랜더링에 대해 처리할 수 있도록 리팩토링 하실 수 있어요.

  • 하지만, 사용자의 인터렉션에 의해 배경화면이 바뀌는 부분은 ClientSide처리(useEffect) 를 쓰셔야 합니다.

 

4.6강 초기 로딩 속도 케이스 비교

0

85

2

Sidebar & Header 컴포넌트 등 레이아웃 설정 방식

0

89

3

문의드립니다.

0

147

3

Vercel signup이 안되요,, 계속 제 깃허브 계정은 추가 인증이 필요하다며 registration@vercel.com에 문의를 하라고 하네요,,, 이럴땐 진행을 어찌해야할까요,,,

1

102

2

에러, 로딩 내용 페이지를 모든 페이지에 다 만드는 이유가 따로 있나요?

2

158

3

3.2, 3.3 화면에 아무것도 나오지 않고 있습니다!

0

211

3

코드가 왜 그런지 모르겠는데, 이럴땐 어떻게 공부해야하나요?

1

222

3

강의외 복잡한 ui 입력폼 관련 질문 있습니다

1

221

2

npx랑 yarn이랑 같이 써도 되나요?

0

437

2

article / section 태그에 관해

0

179

1

카테고리 변경 시 이미지 로딩

1

191

2

next zustand 사용 시 문의

0

474

2

component 파일에서는 tsx파일이 아니라 jsx 파일을 쓰는 이유를 알 수 있을까요?

1

176

2

versel 을 통한 배포를 하는 것과 (홈서버 + 클라우드 플래어 프록시)를 하는 것을 비교해주실 수 있나요?

1

179

1

선생님 죄송한대

1

152

1

깃 push가 안되서 ssh를 한참해메고 있습니다. ㅠㅠ

1

144

1

Chapter 7 영상 화면이 안보입니다.

0

274

2

오류발생 문제입니다.

1

231

1

질문있습니다.

1

181

1

11.5 Channel 노래,앨범 section 강의중

0

157

1

소스 수정 후 자동 컴파일 문의드립니다.

1

283

2

정적배포

0

197

1

zustand 상태관리

0

335

1

state에서 buffer랑 time이 안 나옵니다

0

201

2