문제가 발생한 배경

팀원분이 만들어주신 사이드 메뉴 컴포넌트를 사용해서 페이지 조립하는데 새로고침 시 사이드 메뉴가 나왔다가 들어가는 이슈를 발견한 상황, 기존에 만들어주셨을 때도 이슈가 있었지만 배경색이 투명으로 되어있어 인지 하지 못한 상황

• 문제 상황
  

---

문제가 발생한 원인 알아보기

처음에는 사이드 메뉴가 isOpen 상태로 조건부 렌더링을 줘서 mount, unmount 하는 방식인 줄 알았지만, css 속성으로 transform: translateX(-100%) 뷰포트에만 보이지 않게 하는 방식이였다.

• 컴포넌트 코드

function SideMenu({ dashboards }: SideMenuProps) {
  const [isOpen, setIsOpen] = useAtom(sideMenuAtom);
  const [renderDelayed, setRenderDelayed] = useState(false);
  const sideMenuRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handleSideMenu = (e: MouseEvent) => {
      const target = e.target as HTMLElement;
      if (target.dataset.state === 'sideMenuToggle') {
        setIsOpen((prev) => !prev);
        return;
      }

      if (sideMenuRef.current && !sideMenuRef.current.contains(target)) {
        setIsOpen(false);
        return;
      }
    };

    document.addEventListener('click', handleSideMenu);


    const timeout = setTimeout(() => {
      setRenderDelayed(true);
    }, 400);

    return () => {
      document.removeEventListener('click', handleSideMenu);
      clearTimeout(timeout);
    };
  }, [setIsOpen]);

	// 나머지 컴포넌트 코드...
}

• CSS 코드

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.sideMenu {
  width: 18.75rem;
  height: calc(100vh - 4.3rem);
  background-color: $color-white-ffffff;
  position: fixed;
  top: 4.3rem;
  left: 0;
  animation: slideOut 0.4s ease forwards;
  z-index: 999;

  @include mobile {
    width: 16rem;
    top: 3.75rem;
    height: calc(100vh - 3.75rem);
  }
}

.open {
  animation: slideIn 0.4s ease forwards;
}

코드를 살펴보면 초기 클래스 네임에 animation: slideOut 0.4s ease forwards이 설정되어 있어 새로고침하면 첫 렌더링 시에 transform: translateX(0)이였다가 transform: translateX(-100%) 으로 변하기 때문에 사이드 메뉴가 보였다가 사라지는 현상이 생기고 있다!

---

문제 해결 방법

첫 렌더링시에 slideOut 애니메이션 작동해서 뷰포트에 보였다가 사라지는 것이 문제이기 때문에 기본 스타일에 transform: translateX(-100%)를 지정하고 첫 렌더링이 완료되었다는라는 것을 알 수 있는 state를 하나 생성해 첫 렌더링이 완료되면 그 이후에 slideOut 애니메이션을 지정하여 내가 원하는 동작을 시켜준다.

• 수정 후 컴포넌트 코드

function SideMenu({ dashboards }: SideMenuProps) {
  const [isOpen, setIsOpen] = useAtom(sideMenuAtom);
  const [isFirstRender, setIsFirstRender] = useState(false);
  
   useEffect(() => {
    const handleSideMenu = (e: MouseEvent) => {
      const target = e.target as HTMLElement;
      if (target.dataset.state === 'sideMenuToggle') {
        setIsOpen((prev) => !prev);
        return;
      }

      if (sideMenuRef.current && !sideMenuRef.current.contains(target)) {
        setIsOpen(false);
        return;
      }
    };

    // 첫 렌더링 시에는 slideOut 애니메이션 작동 x
    setIsFirstRender(true);

     // 첫 렌더링이 끝나고 isOpen이 false인 경우에 slideOut 애니메이션을 부여한다.
    if (isFirstRender && !isOpen) {
      sideMenuRef.current?.classList.add(styles.close);
    }

    document.addEventListener('click', handleSideMenu);

    const timeout = setTimeout(() => {
      setRenderDelayed(true);
    }, 400);

    return () => {
      document.removeEventListener('click', handleSideMenu);
      clearTimeout(timeout);
    };
  }, [isOpen]);

  // 나머지 컴포넌트 코드../
}

• 수정 후 CSS 코드

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

.sideMenu {
  width: 18.75rem;
  height: calc(100vh - 4.3rem);
  background-color: $color-white-ffffff;
  position: absolute;
  top: 4.3rem;
  left: 0;
  transform: translateX(-100%); // 기본적으로 뷰포트에 안보이게 설정
  z-index: 999;

  @include mobile {
    width: 16rem;
    top: 3.75rem;
    height: calc(100vh - 3.75rem);
  }
}

.close { // 첫 렌더링이 되고, isOpen이 false인 경우에 애니메이션 부여
  animation: slideOut 0.4s ease forwards;
}

.open {
  animation: slideIn 0.4s ease forwards;
}

---

최종 동작 영상

이제 새로고침 하더라도 처음에는 애니메이션이 없는 상태로 사이드 메뉴가 뷰포트에 보이지 않아 이슈가 해결되었다!