리액트 / Lifecycle, useEffect

Lifecycle : mount -> update -> unmount

 

이걸 알아야 하는 이유는 

내가 이걸 알면 간섭이 가능 

업데이트가 될때 

마운트가 될때 

코드실행을 할 줄 알게 되는거 

 

클래스 컴포넌트에 갈고리 달려면 

componentDidMount(){} 이런식으로 

 

함수형 컴포넌트에 갈고리 달려면 

useEffect(()=>{})

-> 배포전에는 두번씩 실행되니까 거슬리면 index.js에서 strcitmode구문빼면됨

 

이걸 언제쓰냐면 

useEffect 안에 코드는 실행시점이 다르다 

렌더링이 다 되고나면 실행된다 

return안에 있는 코드 다 실행하고 나서 실행한다 

=서버에서 데이터 가져오는작업, 타이머, 그리고 시간이 오래걸리는 코드라던지

늦게실행되어야하는걸 useEffect사용하면 좋다 

 

dependency 

useEffect(() => { }); 1. 재렌더링 될때 마다 코드실행 

 

useEffect(() => { }, [ ]); 2. mount 되었을때 1회 코드실행

 

useEffect(() => { }, [ count ]); 3. count라는 state가 업데이트 되면 코드실행

 

useEffect(() => { }, {             4. unmount시 1회 코드실행 (return안에 코드가

                                      useEffect안에 들어가는 거 전에 코드실행됨 )

 return () => {

  }

 

}, [ ]);