[🚨Err Handling] 로딩 구간에서 필요한 조건부 렌더링

> 해결된 에러라면 라벨에 'Complete' 를 달아주세요.
> 미해결된 에러라면 라벨을 'In progress' 로 변경해주세요.

### 어떤 에러인가요?
- 페이지 렌더링이 준비한 동작보다 빨리됬을 경우에 제동을 걸 수 있는 로직을 작성해야 하는데 useEffect를 이용하려면 살짝 복잡하다.
- 우리가 비동기로 async await을 동작시키는 것 처럼 useEffect를 연결시켜서 해결했다.
- 거기에 더불어서 useEffect가 처음에 빠르게 동작하면서 모든것들을 렌더링 하려고 하는데 그런 경우를 막기 위해서
- useEffect안에서 조건을 줌으로써 조건부 렌더링으로 에러를 핸들링 했다.

### 에러 메시지

```bash
$ 터미널의 에러 코드를 여기 넣어주세요.
```

### 에러 핸들링 방법

- 핸들링 방법에 대해서 간단하게 기록해보세요.

```js
// 코드가 들어가도 좋아요!
useEffect(() => {
handlePageData();
}, []);

useEffect(() => {
}, [handlePageData]);

useEffect(() => {
if (recipeData !== null) {
gsap.registerPlugin(ScrollToPlugin, ScrollTrigger);
setLoading(false);
return () => {};
}
}, [recipeData]);

useEffect(() => {
if (loading === false) {
dispatch({ type: SET_DETAIL_DATA, payload: recipeData });
setStart(true);
const totalLength = recipeData.recipe.descriptions.length;
const moveRatio = 100 / totalLength;

const goToSection = (i: number, anim?: any) => {
gsap.to(window, {
scrollTo: { y: i * window.innerHeight, autoKill: false },
duration: 0.5,
});
const image = document.body.querySelector(
".image"
) as HTMLParagraphElement;
const rightScroll = document.body.querySelector(
".rightScroll"
) as HTMLParagraphElement;
const topBox = document.body.querySelector(
".topbox"
) as HTMLParagraphElement;
const leftBox = document.body.querySelector(
".leftbox"
) as HTMLParagraphElement;
const rightBox = document.body.querySelector(
".rightbox"
) as HTMLParagraphElement;
const main = document.body.querySelector(
".main"
) as HTMLParagraphElement;
const sub = document.body.querySelector(".sub") as HTMLParagraphElement;
const totalMap = document.body.querySelectorAll(
".totalMap"
) as NodeListOf;
[...totalMap].map((item: any) => {
if ([...item.classList].includes(String(i))) {
item.classList.add("mapActive");
} else {
item.classList.remove("mapActive");
}
});
if (
rightScroll &&
topBox &&
leftBox &&
rightBox &&
image &&
main &&
sub
) {
rightScroll.style.transform = `translateY(${i * -262}px)`;
topBox.style.transform = `translateY(${i * -100}%)`;
leftBox.style.transform = `translateX(${i * -moveRatio}%)`;
rightBox.style.transform = `translateX(${
moveRatio - 100 - moveRatio * -i
}%)`;
image.style.transform = `translateY(${i * -100}%)`;
main.style.transform = `translateY(${i * -100}%)`;
sub.style.transform = `translateY(${i * -100}%)`;
}

if (anim) {
anim.restart();
}
};
```

### 에러 핸들링을 위해 참고한 레퍼런스 링크

[링크]()