[트러블 슈팅] 초기 렌더링 시에만 useEffect 콜백이 실행되기 때문에 발생하는 반응형 코드가 적응 안되는 이슈

1. 문제 상황

메인 페이지에서 화면의 너비를 줄여서 모바일 화면으로 변경한 후 상세 페이지로 이동하면, 상세페이지의 반응형 코드가 적용되지 않는 문제가 발생하였다.

2. 문제 원인

이 문제는 useEffect 훅을 사용하여 width 크기 변경 이벤트를 감지하고 상태를 업데이트하는데, 초기 렌더링 시에만 useEffect 콜백이 실행되기 때문에 발생한다. 이로 인해 초기 렌더링 시에는 width 크기 변경 이벤트를 감지하지 못하고, 따라서 초기에 모바일 상태를 설정하지 못하는 것이 원인이였다.

3. 문제 해결

1. useEffect 훅 내에서 초기 렌더링 시에도 handleResize 함수를 호출하여 모바일 상태를 설정한다.
2. 반응형 코드가 의존하는 상태인 isMobile을 useEffect의 의존성 배열에 추가하여, isMobile 상태가 변경될 때마다 useEffect 콜백이 다시 실행되도록 한다.

useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth <= 768);
    };

    handleResize(); // 초기에도 isMobile 상태를 설정, 이를 안하면 detail 페이지에 반응형이 안먹음

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, [isMobile]);