Inflearn コミュニティ Q&A
投稿した質問数
changer라는 컴포넌트를 사용하는 이유
解決済みの質問
作成
·
275
1
HeaderBgChanger라는 컴포넌트는 단순히 서버 컴포넌트에서 react hook을 사용할 수 없기 때문에 만드는 컴포넌트인지 궁금합니다.
또 이렇게 컴포넌트를 만들 경우에 렌더링 될 때 영향을 주는 부분은 없는지 궁금합니다.
react인터랙티브-웹클론코딩next.jstailwind-csszustand
回答 2
1
1
dodocoding
インストラクター
1) 배경화면 변경은 기본적으로 클라이언트 사이드 로직 처리 입니다.
HeaderBgChanger 는 클라이언트단에서 배경 변경 처리를 위해서 만든 컴포넌트 입니다.
zustand 의 전역 상태에 대응하기 위해 클라이언트 컴포넌트로 작성했어요.
이를 구현하기 위해 hook을 사용했죠.
하지만, 이슈가 있죠. 바로 초기 디폴트 배경화면이 보였다가 useEffect에 의해 변경됩니다.
2) 위 한계점을 서버 컴포넌트에서 처리 가능합니다. ( next.js 라서 가능한거죠.)
워크북에 있는 미션 내용중 하나 입니다. 참고해주세요.!
ServerSide에서 초기 이미지 랜더링에 대해 처리할 수 있도록 리팩토링 하실 수 있어요.
하지만, 사용자의 인터렉션에 의해 배경화면이 바뀌는 부분은 ClientSide처리(useEffect) 를 쓰셔야 합니다.