useMemo return

  const animationData2 = 
    activeTab === 1 ? quiz : videoInterview;
 
 

위처럼 일반 식을 업그레이드 하기 위해서 useMemo를 할당했다.
의미없는 연산을 줄이고 싶었기 때문이었다.

  const animationData = useMemo(() => {
    activeTab === 1 ? quiz : videoInterview;
  }, [activeTab]);

위처럼 작성하였을 때는 useMemo나 값이 올바르게 계산하지 못했다.
초기에 렌더링 시 undefined가 할당이 되었고 문제가 되었다.
return 값이 없어서 아무런 값도 받지 못하는 것이 문제였다.

  const animationData = useMemo(() => {
    return activeTab === 1 ? quiz : videoInterview;
  }, [activeTab]);

아래처럼 수정하여 해결하였다.

이를 통해 값은 컴포넌트가 렌더링될 때마다 계산됩니다. 따라서, 값이 변경되지 않는 한, 이전에 계산된 값을 재사용할 수 있다.

---

화면 밀림

드롭 다운기능을 구현할 때 pb-4가 추가 되면서 아래로 밀리는 현상이 있었다.
화면이 깨지고 움직여서 UX가 별로였는데 제거함으로서 해결하였다. ^.^

마무리

단순한 문제인데 변수에서 넘어와서 문제점을 찾는데 시간이 좀 걸렸다.
확실히 리프래쉬가 중요하다. 계속 하다보면 시야가 흐려진다.

체력이 떨어져도 이런 실수는 하면 안되기때문에 작성하고 다음에 방지하려고 작성하였다.