인프런 커뮤니티 질문&답변

김택수님의 프로필 이미지

작성한 질문수

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

10.2 HeaderBgChanger

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

해결된 질문

24.05.02 02:52 작성

·

185

1

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

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

답변 2

1

김택수님의 프로필 이미지
김택수
질문자

2024. 05. 02. 18:51

답변 감사드립니다!

1

도도(코딩루팡)님의 프로필 이미지
도도(코딩루팡)
지식공유자

2024. 05. 02. 12:52

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

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

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

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

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

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

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

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

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