[React] useState의 실행 조건 주기 & clean up function.
useEffect 가 실행될 때의 조건을 넣을 수 있다.
useEffect 내부의 함수가 끝나고 , 이후 대괄호 안에 useEffect의 실행 조건을 넣을 수 있다.
대괄호(dependency 줄여서 deps 라고도 한다.) 안에 무엇이 들어가느냐에 따라서 다른데
아예 안쓰는 경우는 ?
그러면 모든 렌더링 때 마다 useEffect 가 실행된다.
count 라는 변수가 들어가 있으면? [count]
그러면 count 라는 변수가 바뀔때 마다 useEffect가 바뀐다고 보면 된다.
대괄호를 쓰는데 그 안을 비워두면? [ ]
그러면 처음 화면이 렌더링 될 때에만 useEffect 가 실행된다.
이렇게 dependency를 비워두면 처음 화면을 새로고침할 때에만
로그가 찍히고
useState 등으로 아무리 랜더링을 주어도 console이 실행되지 않는다.
💡useEffect 에 return() 을 쓴다구요??
useEffect에 return 을 쓰면 useEffect 가 작동하기 직전에 return 문 내부의 코드가 실행된다.
이곳에 주로 clean up function 을 쓴다.
예를 들어
useEffect 안에 타이머를 설치해 뒀다. 그런데 count 가 바뀌어 동작해서 동시에 타이머가 20개가 돌아간다고 생각해보자.
그래서 타이머를 넣을 때 보통 clean up function을 return 안에 함께 넣어준다.
clean up function
return()=>{
}
단순히 return() 이거 아니니까 착각하지말고 차이 인지하기!
일단 타이머를 변수에 담아주고
useEffect안에 return 문을 만둘고 그 안에
clearTimeout(a); 를 해주면 새로운 타이머가 작동 되기 직전에 기존의 타이머들은 멈춰준다.
비슷한 상황으로 useEffect를 통해서 서버와 접속을 많이하는데
이때도 역시 useEffect를 여러번 해서 데이터가 중첩되어 전송되는걸 방지하고자
clean up function 을 함께 넣어준다.
이러한 코드를 실행 시켰을때 어떤 콘솔이 먼저 출력되는지 확인해보자
clean up function 먼저 동작하는것을 확인할 수 있다!!!
참고로 clean up function 은 mount에는 실행안되고
update 와 unmount 에만 실행한다.
😮그런데 unmount 가 되는 상황은 언제인가요??
1. setTimeout 등을 사용해서 등록했던 작업을 제거할 때 즉, clearTimeOUT 과 같은 작업을 할때
2. 라이브러리 인스턴스를 만들었다면, 이 인스턴스를 제거 할 때
(언마운트 될때 작동하는 함수는 클린업함수가 주로 동작한다. return()=>{} 이 함수!)
unmount 될 때만 cleanup함수를 실행하고자 한다면 [ ](deps)를 비워두고
특정 값이 업데이트 되기 직전에 cleanup함수를 쓰고자 한다면 deps에 해당 값을 넣어주면 된다!.
출처 : 코딩애플 React 강의입니다.
스스로 생각해서 코드를 직접 짜보게끔 많이 유도해주시고 강의 설명도 이해가 쉽게 설명해주십니다.