해결된 질문
작성
·
197
답변 2
1
1
1) 배경화면 변경은 기본적으로 클라이언트 사이드 로직 처리 입니다.
HeaderBgChanger 는 클라이언트단에서 배경 변경 처리를 위해서 만든 컴포넌트 입니다.
zustand 의 전역 상태에 대응하기 위해 클라이언트 컴포넌트로 작성했어요.
이를 구현하기 위해 hook을 사용했죠.
하지만, 이슈가 있죠. 바로 초기 디폴트 배경화면이 보였다가 useEffect에 의해 변경됩니다.
2) 위 한계점을 서버 컴포넌트에서 처리 가능합니다. ( next.js 라서 가능한거죠.)
워크북에 있는 미션 내용중 하나 입니다. 참고해주세요.!
ServerSide에서 초기 이미지 랜더링에 대해 처리할 수 있도록 리팩토링 하실 수 있어요.
하지만, 사용자의 인터렉션에 의해 배경화면이 바뀌는 부분은 ClientSide처리(useEffect) 를 쓰셔야 합니다.