[React] useEffect 정리

React Hooks중 가장 중요한 useEffect - 코드가 딱 한번만 실행될 수 있도록 해줌

mount - 화면에 첫 렌더링

update - 다시 렌더링

unmount - 화면에서 사라질때

특정작업을 하는 코드를 실행하고 싶다면 useEffect 사용하는 것

useEffect 2가지 형태 있음

 

인자로 콜백함수만 받는 형태

useEffect (( ) => { // 작업 })

컴포넌트 매번 랜더링 될때 마다 실행

 

 

 

인자로 콜백함수, 배열 받는 형태

useEffect (( ) => { // 작업 }, [value] )

- 컴포넌트가 화면에 첫 렌더링 될때

- value 값이 바뀔때 실행

 

 

 

인자로 받은 배열이 빈배열일때

useEffect (( ) => { // 작업 }, [ ] )

컴포넌트가 화면에 첫 렌더링 될때만 실행

 

 

 

clean up

 

useEffect 안에 구독하는 코드 만들었다면 이후 구독 취소해주는 코드,

타이머 만들었다면 더이상 타이머가 필요없을때 없애주는 코드 필요

return 값 넣으면 됨

useEffect (( ) => { 
    // 작업 
    return ( ) => {
        //구독해지
    }
}, [ ] )