useEffect 내부에서는 기명함수를 사용하자

 

 

 

 

 

useEffect

 

useEffect는 외부 시스템과 컴포넌트를 동기화 시켜주는 리액트 훅으로,

공식 문서에 나와있는 useEffect의 예시 코드는 이러한 모양입니다.

 

useEffect의 사용 예시

 

 

코드를 보면, useEffect의 첫 번째 인자로 트리거 시 실행될 동작을 익명함수로 넣어주고 있습니다.

이때 훅 내부의 함수가 길어지면 특별한 주석 없이는 코드의 동작을 알기 어려워 질 때가 종종 발생합니다.

따라서 함수를 적절한 이름을 붙인 기명함수로 바꿔주면 팀원들의 이해를 도와줄 수 있습니다.

 

이 상태에서, 임의로 오류를 발생시켜 보겠습니다.

 

 

익명함수에서 오류가 발생한 상황

 

 

Uncaught Error: Error occurred!
    at (/src/App.jsx?t=1710664770335:24:11)

 

 

에러가 발생한 위치의 stack trace에 at 뒤로 파일의 위치만 알려주고 있습니다.

마찬가지로 함수가 익명함수이기 때문에 발생하는 현상인데,

이를 기명함수로 변경시켜 준 뒤 모습을 살펴보겠습니다.

 

 

기명함수에서 오류가 발생한 상황

 

 

Uncaught Error: Error occurred!
    at errorTrigger (/src/App.jsx?t=1710664810199:24:11)

 

 

익명함수와는 다르게, 기명함수에서는 어떤 함수에서 에러가 발생했는지 확실하게 표시해주는 모습입니다.

디버깅을 할 때에도 에러가 발생한 부분을 정확히 파악하면 문제를 빠르게 해결할 수 있기에

앞으로도 익명함수보다는 기명함수를 사용하는 습관을 들인다면 좋겠습니다.

 

 

 

함수의 위치

useEffect를 컴포넌트의 어디에 선언해 둘 것인가에 대해서도 여러가지 의견이 있습니다.

보통 컴포넌트의 최상단 혹은 JSX return의 바로 위 정도로 나뉘는데,

이 부분은 취향이나 팀 컨벤션의 영역이라고 생각합니다.

 

1) 컴포넌트의 최상단

function App() {
  const [state, setState] = useState(0);
  const [state2, setState2] = useState(1);

  useEffect(function errorTrigger() {
    console.log("is Mount");
    throw new Error("Error occurred!");
  }, []);

  /**
   * other function...
   */

  return (
    <div className="App">
      <h1>useEffect test</h1>
    </div>
  );
}

 

 

2) JSX return의 위

function App() {
  const [state, setState] = useState(0);
  const [state2, setState2] = useState(1);
  
  /**
   * other function...
   */

  useEffect(function errorTrigger() {
    console.log("is Mount");
    throw new Error("Error occurred!");
  }, []);

  return (
    <div className="App">
      <h1>useEffect test</h1>
    </div>
  );
}

 

 

개인적으로는 jsx return의 바로 위를 선호합니다.

 

useEffect의 특성상 렌더링에 영향을 미치는 부분도 많고,

컴포넌트의 다른 함수들이 먼저 선언 된 뒤 side effect에 관련된 코드가 나오는 흐름이 자연스럽게 느껴지더라구요.

 

 

 

마치며

어찌보면 사소할 수도 있는 내용들이지만, 알아두면 분명 좋은 내용이라 정리해보았습니다.

짧은 글 읽어주셔서 감사합니다.