[React] Vue 개발자가 본 useEffect

useEffect 는 Vue 의 watch / watchEffect  , onMounted, onUpdated, onUnmounted 를 

를 결합한 것과 유사한 기능을 제공합니다.

 

1. vue 와의 비교

   <!-- Vue -->
   <script setup>
   import { onMounted, onUnmounted, watch } from 'vue'

   onMounted(() => {
     console.log('컴포넌트가 마운트되었습니다')
   })

   watch(someData, (newValue, oldValue) => {
     console.log('데이터가 변경되었습니다')
   })

   onUnmounted(() => {
     console.log('컴포넌트가 언마운트됩니다')
   })
   </script>

   // React
   import { useEffect } from 'react'

   useEffect(() => {
     console.log('컴포넌트가 마운트되었습니다')

     return () => {
       console.log('컴포넌트가 언마운트됩니다')
     }
   }, []) // 빈 배열은 마운트와 언마운트 시에만 실행

   useEffect(() => {
     console.log('데이터가 변경되었습니다')
   }, [someData]) // 마운트 된 이후 , someData가 변경될 때마다 실행

 

 

• Vue는 더 명시적인 생명주기 훅을 제공하지만, React는 useEffect로 여러 생명주기 관련 동작을 통합합니다
• React의 useEffect는 기본적으로 렌더링 후에 실행되지만, Vue의 watch는 기본적으로 DOM 업데이트 전에 실행됩니다

2. 사용 예

 

• 데이터 페칭
• DOM 조작(포커싱)
• 이벤트 리스너 등록/제거
• 외부 라이브러리 초기화/정리

 

3. 특징

• 의존성 배열: useEffect의 두 번째 인자로 배열을 전달하여 언제 효과를 실행할지 제어합니다. Vue의 watch와 유사합니다.
• 클린업 함수: 효과 함수에서 반환하는 함수로, Vue의 onUnmounted와 유사한 역할을 합니다.

 

4.사용 이유

• 컴포넌트의 생명주기와 관련된 로직을 한 곳에서 관리할 수 있습니다.
• 관련 있는 로직을 그룹화할 수 있어 코드 구성이 더 명확해집니다.
• 클래스 컴포넌트의 여러 생명주기 메서드를 대체하여 코드 중복을 줄입니다.