패스트캠퍼스 챌린지 26 일차 - useEffect

0. 공부 인증 

공부 시작 23 : 14

공부 종료 23 : 45

 

그럼 20000... 

학교 과제하러 다시...갑니다😰😰

 

1. useEffect의 마운트와 언마운트

useEffcect의 공식 문서

https://ko.reactjs.org/docs/hooks-effect.html

Using the Effect Hook – React

componentDidMount, componentDidUpdate의 기능을 하는 것임.

 

자동으로 시간에 따라서 카운트 되는 코드

const [second, setSecond] = useState(0);

 

setInterval(() => {

     setSecond(second + 1)

}, 1000)

 

return ({second})

 

-> 그런데 이렇게 하면, 매우 이상하게 작동함.

-> 왜그러냐면, 우선 JSX가 계속 업데이트 되면서 컴포넌트가 재마운트 됨.

(그러면 인터벌 함수를 계속 실행하게 됨)

 -> 즉, 기존의 실행되고 있는 함수에 의해 0 1 2 3 4 5...

      두번 째 함수도 0 1 2 3 4.... 

      여러번 겹쳐서 실행이 됨.

 

-> 그래서 이런 문제를 피하기 위해서 useEffect를 사용함.

useEffect() 는 마운트 이후에 실행이 됨.

useEffect(()=> {}, []) 두번째 변수에 deps를 넣어주면 됨.

 

근데 useEffect(() => { ~~ }, [second]) 가 되면 위의 함수와 똑같이 이상한 출력이 됨 (동일 이유)

 

그러나 이것또한 해결할 수 있음.

 

useEffect 뒤에 unmount 함수를 넣어줄 수 있음.

 

그래서 unmount 시에 인터벌을 해제 시킬 수 있음

 

const [second, setSecond] = useState(0);

~~~
useEffect(() => {
  let interval = setInterval(() => {
	setSecond(second + 1)
  }, 1000)
  
  return () => {
  	clearInterval(interval)
  }
},[second])

return (~{second}~)

예를 들자면, 백엔드 통신이 포함된 기능에서는,

JSX 컴포넌트가 변결 될때마다,

재마운트 되어 요청을 여러번 보낼 수도 있음

-> 그래서 mount와 unmount에서 그런 중복 처리를 방지.

-> unmount가 되는 함수를 클린업이라고 함.

 

 

 

 

 

환급 챌린지 (26/30)

 

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는Node.js웹프로그래밍초격차패키지