[TypeScript] 페이지가 렌더링될 때 불필요한 useEffect 방지

React는 기본적으로 SPA (Single Page Application)으로,
단 하나의 페이지로 이루어진 애플리케이션입니다.

하지만 설계를 하다보면 하나의 페이지로 해결되지 않는 경우가 많습니다.
이 때 React Router를 사용하여 여러 페이지를 네비게이션 하는 것처럼 사용자 경험을 제공할 수 있습니다.

여기서 문제가 발생하곤 합니다.

문제 상황

다른 페이지로 이동 (Navigate) 할 때 useEffect가 불필요하게 실행됩니다.

→ useEffect가 중복으로 발생하면 API 중복호출로 인한 낭비, 같은 내용 중복 표시 등이 발생합니다.

해결 방법

가장 쉬운 방법은 useRef로 변수를 선언하는 것입니다.

const hasPageBeenRendered = useRef({ effect: false });

useEffect(() => {

    ...
    
    if (hasPageBeenRendered.current["effect"]) {
      // 실행할 내용
    }
    hasPageBeenRendered.current["effect"] = true;
  }, [...]);

useEffect는 페이지 처음 렌더링 될 때 실행됩니다.
때문에 이를 원하지 않는다면, Boolean으로 따로 처리를 해줘야합니다.

만약 hasPageBeenRendered가 false라면, 페이지가 처음 렌더링 됐으므로,
hasPageBeenRendered가 true일 때만 실행되도록 조건문을 사용합니다.

느낀점

알고리즘 공부를 하면서 단순하게 Boolean형을 통해 특정 상황에서 실행하도록 (또는 실행하지 않도록) 하는 경우가 있었지만, 이는 비효율적인 코드라고 생각해서 실제 프로젝트에서는 고려해보지 못했습니다.

하지만 현재와 같은 상황에는 이런 잔기술?도 매우 유용하게 사용되므로, 조금 더 프로그래밍에 대한 시야를 넓힐 필요가 있다고 생각합니다.