useEffect

---

useEffect : React Component가 재렌더링 될 때마다 특정 작업 ( side effect ) 을 수행하도록 하는 React Hook으로, 컴포넌트의 최상위 또는 커스텀 훅 ( Hook ) 에서만 사용.

🔍 컴포넌트의 Life-cycle 이란 ?

💡 Mount
컴포넌트 내에서 DOM이 생성되고 웹 브라우저 상에 나타나는 것.

💡 Update
컴포넌트 내에서 변화가 발생하였을때 .

💡 Unmount
컴포넌트 내에서 DOM이 제거되고 웹 브라우저 상에서 사라지는 것.

📌 useEffect 를 통해 생명주기에 따라 특정 작업을 수행 가능.

🧸 useEffect

useEffect(callbackFn, dependancyArray)

✔︎ callbackFn : 실행할 로직을 작성.
✔︎ dependancyArray : 의존성 배열으로, 로직을 실행할 시기를 결정.

🧸 의존성 배열

➀ 의존성 배열이 빈 배열인 경우

import React, { useEffect } from 'react'

const App = () => {
	useEffect(()=>{
      // 실행할 로직
    },[])
  return <></>;
}

✔︎ 컴포넌트가 마운트 ( mount ) 될 때만 로직이 실행.
✔︎ 배열 내에 상태를 체크할 변수를 설정하지 않았기 때문에, useEffect는 최초 렌더링 이후 딱 한번만 실행.

➁ 의존성 배열에 값이 있는 경우

import React, { useState, useEffect } from 'react'

const App = () => {
  	const [state, setState] = useState('');
  
	useEffect(()=>{
      // 실행할 로직
    },[state])
  
  return <></>;
}

✔︎ 의존성 배열에 넣어준 값인 state 에 변화가 감지될 때마다 실행.
✔︎ 같은 페이지 내부에서 setState( ) 가 실행될 때마다 설정한 로직이 실행된다는 것을 의미.

📌 Caution.
의존성 배열 자체를 설정하지 않거나 값을 잘못 설정한 경우, useEffect 내부 로직이 무한루프로 실행되니 주의.

Example.

import React, { useState, useEffect } from 'react'

const App = () => {
  	const [state, setState] = useState('');
  
	useEffect(()=>{
      setState(state + 1)
    },[state])
  
  return <></>;
}

✔︎ 컴포넌트가 마운트되고 setState() 가 실행되면서 state 값 변경
→ state 값의 변화를 감지하고 useEffect 내부 로직 실행 ... ~ 무한루프 ~

🔗 useEffect 무한 루프에 대한 좋은 글을 공유해주셔서 참조했습니다.
🔗 Reference : useEffect 무한루프에 관한 글

📌 !important.
의존성 배열을 항상 빈 배열로 세팅한 후 필요에 따라 값을 설정해주기.

🧸 Clean Up 함수

➀ 페이지를 이동할 경우

import React, { useEffect } from 'react'
import { useNavigate } from "react-router-dom";

const App = () => {
  const navigate = useNavigate()
  
  useEffect(()=>{
		return ()=>{
          // unmount 되었을 때 실행할 로직 =cleanup
		}
	}, [])
  
  return <button onClick={()=>{navigate('/'}}> → </button>;
}

✔︎ 컴포넌트가 언마운트 ( unmount ) 되었을 때 로직이 실행.
✔︎ 버튼을 클릭하면 페이지가 이동되면서 즉, 브라우저 상에서 컴포넌트가 사라지면서 로직이 실행.

➁ 타이머 함수

useEffect(()=>{ 
  let a = setTimeout(()=>{ alert('시간이 다됐어요 !') }, 10000)
  return ()=>{
    clearTimeout(a)
  }
}, [])

✔︎ 기존에 있던 타이머 함수를 지우고 그 후에 타이머 함수를 새로 실행시켜 준다는 의미.