재시민

배경

useEffect 를 이용해 한번만 함수를 처리하게 하려고 했다.
하지만 왜인지 모르게 자꾸 렌더링이 두번씩 되어 함수가 두번 실행이 되었다.

해결

https://youngble.tistory.com/175

다음 글을 보면 index.js 의 React.StrictMode 때문이라고 한다.

import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}

개발모드에서만 작동되는 StrictMode 는 다음과 같은 효과를 준다고한다.

1. 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
2. 레거시 문자열 ref 사용에 대한 경고
3. 권장되지 않는 findDOMNode 사용에 대한 경고
4. 예상치 못한 부작용 검사
5. 레거시 context API 검사
6. Ensuring reusable state

https://ko.legacy.reactjs.org/docs/strict-mode.html

문서에 들어가면 더 자세히 볼 수 있다.

결론은 index.js React.StrictMode 를 제거하면 한 번만 호출 된다.