렌더링 순서를 설정할 수 있는지 궁금합니다!

[김동연]

안녕하세요. 강의를 듣고 개인 프로젝트를 위해 사이트를 제작 중입니다.

지금 아래 사진과 같이 사이트의 로그인여부를 확인하고, 로그인 여부에 따라 useNavigate를 사용하여 페이지를 이동시키는 <IsLogin/> 컴포넌트를 제작 후 사용중입니다.

현재 동작(로그인 여부에 따라 페이지 이동)에는 문제가 없지만, 모든 부분이 렌더링이 한번 이루어진 후  페이지 이동이 이루어지기 때문에 페이지 이동 직전(대략 0.2~0.3초) 정도 다른 컴포넌트들(<Header/> <Footer/> 그 외 코드)이 페이지에서 잠깐 보인다음에 <IsLogin/> 컴포넌트가 동작합니다. 

이 부분이 보기에 상당히 거슬려서 혹시 <IsLogin/> 컴포넌트만 먼저 동작할 수 있는 방법이 있을까요?

- 사진

[codingapple]

css를 이쁘게 꾸미거나

if문 써서 저 컴포넌트 로드되면 <Header> 보여주세요~라고 코드짜도 될 것 같기도 합니다 

useEffect는 컴포넌트가 mount 되었을 때 내부 코드를 실행해줍니다

[글쓴이]

글