React _ Clean up 처리

React useEffect에서 else 없이 클린업 처리하기

useEffect를 사용할 때, 상태에 따라 작업을 처리하면서 **클린업(cleanup)**을 수행하는 것은 매우 중요하다. 특히, 아래 코드처럼 else를 사용하지 않고 클린업을 처리하는 방식은 React에서 권장되는 패턴이다.

useEffect(() => {
  const modal = dialog.current;
  if (open) {
    modal.showModal(); // 상태가 true일 때 다이얼로그 열기
  }

  return () => modal.close(); // 상태 변경 또는 언마운트 시 다이얼로그 닫기
}, [open]);

---

왜 else를 사용하지 않을까?

1. React의 클린업 메커니즘과 호환
   • useEffect는 상태 변경이나 컴포넌트 언마운트 시 클린업 함수를 호출한다.
   • return을 통해 클린업 로직을 항상 처리하므로, else가 불필요하다.
2. 코드의 간결성과 안전성
   • else를 추가하면 로직이 복잡해지고, 클린업이 누락될 가능성이 있다.
   • return을 사용하면 상태와 관계없이 클린업이 항상 호출된다.
3. React 권장 패턴 준수
   • 클린업은 상태 변경과 언마운트 상황 모두에서 작동해야 하므로, return을 통한 처리가 React의 권장 방식이다.

---

else를 사용할 경우의 문제점

useEffect(() => {
  const modal = dialog.current;

  if (open) {
    modal.showModal();
  } else {
    modal.close(); // 언마운트 시에는 호출되지 않을 수 있음
  }
}, [open]);

• 상태 변경은 처리할 수 있지만, 컴포넌트 언마운트 시에는 else 조건이 작동하지 않는다.
• 클린업이 보장되지 않아 예기치 않은 동작이 발생할 수 있다.

---

결론

React에서 useEffect와 클린업을 사용할 때는 return으로 클린업을 처리하는 것이 가장 안전하고 간결한 방법이다. 이렇게 하면 상태 변경과 언마운트 상황에서 항상 클린업이 실행되며, 코드의 유지보수성이 향상된다. 😊

추천 패턴:

useEffect(() => {
  if (open) {
    dialog.current.showModal();
  }

  return () => dialog.current.close();
}, [open]);