안녕하십니까 센세
next.js, styled componet 이용해서 개인 프로젝트 하고 있는데
client 컴포넌트에서 렌더링 될 때 html 먼저 렌더링되고
대략 1초 후에 styled-component가 적용되더라구요.
예를 들어서
const Box = styled.div`background : black;`
...
return <Box>테스트</Box>
이런 모양의 컴포넌트에선 html에 그냥 div 박스가 먼저 렌더링 되고
뒤늦게 styled-component가 적용되는 형식입니다.
html 로드와 css 로드 시간의 차이 문제라고 판단해서
컴포넌트 마운트 여부를 판단하는 상태를 리턴하는 커스텀 훅을 만들어서
상태가 true면 컴포넌트 마운트가 완료됐으니까 기존 html 리턴하기, false면 로딩 컴포넌트 보여주기.
이런 형식으로 하니까 어느정도 해결되긴 했습니다.
문제는 이런식으로 플래그 상태를 사용하는게 권장되는 방식이 아니라고 하더라구요.
useRef를 사용하면 마운트가 완료될때까지 화면이 비어서 그것도 사용자 경험에 좋진 않을 것 같더라구요.
또 Ref는 리렌더링에 관여하지 않으니까 로딩 컴포넌트를 보여줄 수도 없구요.
세줄요약 하자면
1. styled-component 사용하니까 html 요소가 css 보다 먼저 화면에 보여서 ux와 performance에 하자가 생긴다.
2. 그래서 컴포넌트 마운트 여부를 저장하는 플래그 상태를 리턴하는 커스텀 훅을 사용하니까 문제가 해결되긴했다.
3. 근데 이런 식의 플래그 상태는 리액트에서 권장하는 방식이 아니며, 불필요한 리렌더링이 발생할 수 있다.
문제를 본질적으로 해결하려면 어떻게 해야할까요?
