[React] useEffect

Life Cycle

 

컴포넌트에는 LifeCycle이 있다.

 

페이지에 장착되는 mount

가끔 업데이트 되는 update

쓸모 없어지면 제거되는 unmount

 

근데 이 Life Cycle을 왜 배울까? 

cycle 중간중간에 코드를 실행할 수 있기 때문이다. 그때 흔히 갈고리를 달아서 간섭을 한다고 한다.

예를 들어 mount할때 갈고리를 달면 mount 될때 코드가 같이 실행된다.

이렇게 컴포넌트에 다는 갈고리를 useEffect라고 한다. 

 

useEffect

useEffect는 mount,update 시 코드를 실행시켜준다.

 

useEffect 코드는 html 렌더링 후에 동작하기에 계산이 많거나 시간이 오래걸리는 코드들은 useEffect에 넣어주면 좀 더 빠르게 html을 보여줄 것이다. 

 

🌊 useEffect 안에 적는 코드들

 

어려운 연산, 서버에서 데이터를 가져오는 작업, 타이머 장착 

 

🐋 js에서 타이머 쓰는 법

 

🐋 해보기 : useEffect와 setTimeout을 사용하여 2초가 지나면 div태그가 사라지게 해보자!

 

이 div 태그가 2초 지나면 삭제 되어야 한다.

 

 

setTimeout함수는 2초가 지나면 alert변수를 false로 바꿔준다. alert가 false면 div자리가 null이 된다.

 

어랏 근데 useEffect 끝에 [ ] 의 정체는 뭘까?

 

useEffect에 실행조건 달아주기 

 

실행조건을 전문용어로 dependency라고 한다. [ ]가 없다면 mount,update시에 실행되지만 

[ ] 만 있으면 mount 될때만 실행된다. 최초 1회만 실행되는 것이다.

 

 

근데 대괄호 안에 alert라고 dependency를 넣어주면 alert라는 변수가 바뀔때마다 실행된다!

 

 

 

 

clean up function

 

이제 useEffect에 return을 추가해보겠다. 

 

return은 useEffect 동작 전에 실행된다. 리턴을 clean up function이라고 한다.

 

리액트 특성상 재 렌더링이 많다.그래서 기존 코드를 치워줘야 버그가 발생하지 않는다.

기존코드를 치우는 걸 return 안에 써서 clean up 한다.

 

clean up function 안에 쓰는 것은 타이머나 서버로 부터 데이터를 받을 때 쓴다.

만약 서버로 부터 데이터를 전송 받는 코드가 있는데 데이터를 받아오기도 전에 재 렌더링이 되어버리면 clean up function을 통해 이전에 받아온 코드는 지워주세요~ 할 수 있다.

 

🌊 그래서 타이머 제거 하는 방법은?

 

 

clearTimeout 이라는 타이머를 제거하는 함수를 사용한다 

 

💎 clean up function은 mount 시에는 실행이 되지 않고 unmount시에만 실행된다. (컴포넌트가 삭제될 때)

 

🐋 해보기 : useEffect 사용하여 input에 숫자가 아닌 다른 값이 입력된다면 "그러지 마세요!" 출력하게 해보기 

 

js에서 숫자인지 확인하는 함수중에 isNaN이 있다!

 

 

isNaN을 활용해서 alert이 바뀔 때 useEffect를 사용해주면 된다. 

 

 

Recap : useEffect를 쓰는 경우?

 

1. 특정 컴포넌트가 재 렌더링할 때마다 실행하고 싶으면 사용

2. 컴포넌트가 mount될 때 최초 1회만 실행시키고 싶으면 사용

3. 컴포넌트가 삭제될 때 1회만 실행하고 싶으면 사용 > 그때는 clean up function 사용

4. useEffect 실행전에 뭔가 실행하려면 return()=>{ } 사용하면 됨!