#uselayouteffect

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

안녕하세요 6개월차 프론트엔드 주니어 개발자입니다. 궁금한 부분을 뭐라고 구글링해야될지 모르겠어서 제목도 애매한데 제가 궁금한 부분은 페이지에 헤더 내용에 따라 높이가 다른 바디 푸터 가 있는데 바디의 내용을 불러오는 시간이 매우 짧다면 잠깐 사이에 푸터가 깜빡거리면서 노출되었다가 컨텐츠가 생기면서 아래로 밀려나며 안보이게 되는 부분이 깜빡임처럼 보여서 고치고 싶기 때문입니다. 바디의 내용이 항상 같은 사이즈라면 고정 div를 두고 로딩중일땐 그 div를 노출시키는 조건문을 생각해봤는데(유튜브앱에서 댓글창이 로딩중일때 일정 레이아웃을 잡고 빈 공간인것처럼요) 지금 페이지에도 isLoading값을 가져와서 아무것도 없는 높이가 큰 div를 보였다가 데이터가 오면 보이도록 적용해보았는데 이렇게 하면 내용이 몇줄 안될때, 로딩중일때는 큰 div에 밀려 footer가 안보이다가 내용이 로딩되면 내용의 길이가 짧아 footer가 다시 보이는 부분으로 올라와서 깜빡임처럼 보인다는점 입니다. 깜빡임 등의 키워드로 검색하면 useLayoutEffect나 이미지 lazy loading 등의 정보만 있어서 제가 원하는 부분과는 다른것같습니다. 해당 조언을 구할 사수가 따로 없고 구글링이나 gpt에도 설명할 키워드가 부족해 이렇게 질문 남깁니다. 현업에서는 이런 조건일때 어떻게 예외처리를 하는지 궁금합니다. (현재 프로젝트에서 스피너를 따로 사용중이지 않아서 더 깜빡임처럼 보입니다.)

State 변경 전 effect 실행하기

Functional component에서, 어떤 state가 변경되기 전에 effect를 실행할 수 있는 hook이 있는지 궁금합니다. useEffect / useLayoutEffect 등은 state가 변경된 뒤에 실행됩니다. Class component의 componentWillUpdate같은 라이프 사이클을 functional component에서 사용할 수 있는 방법이 있을까요?

useLayoutEffect는 언제 쓰는건가요?

안녕하세요~ 이번에 코드 리뷰를 받았는데 "useEffect 대신 useLayoutEffect를 쓰는게 좋아요~" 라는 피드백을 받았습니다. 코드 구조는 컴포넌트에서 ref를 선언한 후 useEffect로 해당 값을 바꾸고, 추후 다른 컴포넌트의 훅에서 이 ref 값을 참조해서 로직이 돌아가는 형태였습니다 (회사 코드라 첨부를 할 수가 없네요...ㅠㅜ) 그런데 왜 useEffect 대신에 useLayoutEffect를 써야하는지 잘 모르겠더라구요. 혹시 이유를 아시는분 있나요?