[React] 최초 렌더링에서 useEffect 실행 생략하기

안녕하세요, 개발자 Sean입니다. 

 

오늘 플랫폼 테스트 진행 중 이상한 버그 하나를 발견했습니다. 

 

차트를 그리는 페이지에서 차트 세팅을 변경해 적용하면

 

변경된 세팅이 아닌 이전 세팅값으로 차트가 그려지는 현상이었습니다. 

 

왜 이런 현상이 발생하는지 조사해보니,

초기 렌더링 때 상태변화가 이루어지지 않은 상태에서 이전 상태 값으로 차트를 그렸기 때문에 문제가 발생하는 것을 확인할 수 있었습니다.

 

개인적으로 올바른 해결방법은 아니라고 생각하지만 급한데로 우선은 useEffect에서 초기 렌더링일 때는 함수 실행을 스킵하도록 코드를 짰더니 문제가 해결되긴 했습니다. 

 

방법은 여러가지가 있을 수 있겠지만 제가 사용한 방법은 useRef를 활용하는 것이었습니다. 

  const notInitialRender = useRef(false)

  useEffect(() => {
    if (notInitialRender.current) {
      getData(data);
      const updateQuery = async () => {
        const query = await convertDataUritoQueryObj(data, analytics.dataQuery);
        setQuery(query);
      }
      updateQuery();
    } else {
      notInitialRender.current = true;
    }
  },[analytics.tabList]);