useEffect 안에 함수를 선언 및 호출하는 방식 vs 밖에서 선언하고, 안에서 호출하는 방식

useEffect 안에서 함수 선언 및 호출

useEffect(() => {
  const getInfo = async () => {
      try {
        const res = await axios.get('/infos');
        setInfo(res.data);
      } catch (e) {
        console.log('데이터 받아오기 실패');
        throw e;
      }
  };
  getInfo();
}, []);

이 방식은 다음과 같은 장단점을 가진다.

[장점]

• 함수가 한 번만 쓰일 때 간단하고 뚜렷하게 표현 가능
• 외부로 노출 안 되니 캡슐화가 잘 됨
• 빠르게 작성할 때 편리함

[단점]

• 함수가 길어지면 가독성이 떨어짐
• 재사용이 불가능
• 디버깅/로깅에 불편

=> 초기 데이터를 한 번만 불러올 때 유용하다.

 

 

useEffect 밖에서 선언하고, useEffect 안에서 호출하는 방식

const getInfo = async () => {
  try {
    const res = await axios.get('/infos');
    setInfo(res.data);
  } catch (e) {
    console.log('데이터 받아오기 실패');
    throw e;
  }
};

useEffect(() => {
  getInfo();
}, []);

이 방식은 다음과 같은 장단점을 가진다.

[장점]

• 가독성이 좋고 코드가 깔끔하게 나눠짐
• 테스트하거나 디버깅할 때 따로 호출해볼 수 있음 (예: 버튼 눌러 다시 불러오기)
• 다른 곳에서도 해당 함수를 재사용할 수 있음 (예: 새로고침 버튼)

[단점]

• 외부 상태를 사용하는 경우, 의존성 관리에 주의해야 함

=> 재사용 가능성이 있는 함수라면 이 방식을 채택하는 것이 좋다.

 

 

결론: 웬만하면 useEffect 밖에 선언하고, 안에서는 호출만 하자.

함수는 재사용을 위해 만들어지는 경우가 대부분이고, 재사용이 되지 않는다 하더라도 useEffect 구문 안에서 선언과 호출을 동시에 하면 가독성도 낮아지고 그나마 있었던 재사용성도 사라져서 굳이 함수로 만든 의미가 없어진다.