useEffect(사용법)

kny_0 2022. 6. 7. 02:22

2022. 6. 7. 02:22

useEffect(()=>{ /*코드*/ })

[]가 없으면 재렌더링마다 코드가 실행된다.

useEffect(()=>{ /*코드*/ }, [])

컴포넌트 mount시 한 번만 실행한다.

useEffect(()=>{ /*코드*/ }, [state])

state가 변할 때만 코드를 실행해 준다. [] 안에는 여러개 state를 넣을 수 있다.

useEffect(()=>{ 
   return ()=>{
      /*코드*/
   }
})

useEffect 안의 코드 실행 전 항상 실행된다.

useEffect(()=>{ 
   return ()=>{
      /*코드*/
   }
}, [])

컴포넌트 unmount시 한 번 실행된다.

useEffect(()=>{ 
  //실행 2
  
  return ()=>{
     //실행 1
  }
}, [])

useEffect 안에 있는 코드를 실행하기 전에 return () => { } 안에 있는 코드를 실행한다.

return 안(clean up function)에는 타이머 제거, socket 연결 요청 제거, ajax 요청 중단 등의 코드를 작성한다.

컴포넌트 unmount 시에도 clean up function 안의 코드가 한 번 실행된다.

Coding Diary