리액트 바디의 높이가 content fit일때 데이터 로딩중의 화면

Question

안녕하세요 6개월차 프론트엔드 주니어 개발자입니다.

궁금한 부분을 뭐라고 구글링해야될지 모르겠어서 제목도 애매한데

제가 궁금한 부분은 페이지에
헤더
내용에 따라 높이가 다른 바디
푸터
가 있는데

바디의 내용을 불러오는 시간이 매우 짧다면
잠깐 사이에 푸터가 깜빡거리면서 노출되었다가 컨텐츠가 생기면서 아래로 밀려나며 안보이게 되는 부분이 깜빡임처럼 보여서 고치고 싶기 때문입니다.

바디의 내용이 항상 같은 사이즈라면 고정 div를 두고 로딩중일땐 그 div를 노출시키는 조건문을 생각해봤는데(유튜브앱에서 댓글창이 로딩중일때 일정 레이아웃을 잡고 빈 공간인것처럼요)
지금 페이지에도 isLoading값을 가져와서 아무것도 없는 높이가 큰 div를 보였다가 데이터가 오면 보이도록 적용해보았는데
이렇게 하면 내용이 몇줄 안될때, 로딩중일때는 큰 div에 밀려 footer가 안보이다가 내용이 로딩되면 내용의 길이가 짧아 footer가 다시 보이는 부분으로 올라와서 깜빡임처럼 보인다는점 입니다.

깜빡임 등의 키워드로 검색하면 useLayoutEffect나 이미지 lazy loading 등의 정보만 있어서 제가 원하는 부분과는 다른것같습니다.
해당 조언을 구할 사수가 따로 없고 구글링이나 gpt에도 설명할 키워드가 부족해 이렇게 질문 남깁니다.
현업에서는 이런 조건일때 어떻게 예외처리를 하는지 궁금합니다.
(현재 프로젝트에서 스피너를 따로 사용중이지 않아서 더 깜빡임처럼 보입니다.)

백승훈 · Accepted Answer

안녕하세요 답변드립니다. 😏

어떤 프레임워크를 사용하는지도 중요한 요소중 하나일 것 같습니다.

Next.js 와 같은 SSR 환경 구성이 가능하신 상태라면 서버에서 페이지의 랜더링, 패칭 이후 푸터까지 다 그려진 시점에서 데이터를 받아와 표시하는 것이 가능합니다.

https://nextjs.org/docs/app/building-your-application/rendering/server-components#how-are-server-components-rendered

일반적인 리액트 환경이라면 여러가지 방식이 가능합니다.

1. html의 요소나 Javascript를 사용해 돔 요소를 컨트롤 할 수 있습니다.
제가 이전 작성한 글을 첨부합니다.

https://zerosial.tistory.com/entry/preload-beforeunload%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%98%EC%9E%90

2. 일반적으로 푸터의 이동현상은 div요소의 크기가 결정되지 않아 생깁니다. 이러한 높이가 정해진 후 푸터를 보여주는 방식을 사용할 수 있습니다. 즉 body를 보여주는 데이터를 다 받아온 후 데이터가 있을 때를 감지해 useEffect 등을 활용해 footer를 display:none에서 보여주게 변경하는 방식이 있습니다.

3. 시간 자체가 크게 걸리지 않고 로딩이 오래걸리지 않는다면 모든 요소가 로딩 후 app.js의 구성요소를 보여주는 방식도 사용가능합니다. (단 이경우 body에 들어가는 내용의 로딩이 오래걸린다면 그때동안 빈 흰화면이 표시될 수 있습니다)

요지는 결국 데이터를 패칭하기 전까지 높이가 확정되지 않고 이러한 본문 밑에 footer를 넣는다면 데이터의 패칭후 높이가 정해진 다음 footer를 보여주던지 그려줘야 합니다.

혹은 디자인 자체에서 flex를 활용해 높이는 유저가 보는 화면, 푸터와 해더를 아예 고정하여 (sticky등을 사용) body와 관계없이 먼저 그리는 방식도 자주 사용됩니다.