useEffect

useEffect란?

• 어떤 component가
  • mount 되거나 (화면에 처음 렌더링되어 나타날 때)
  • update 되거나 (props 변경, state 변경, 부모 component 리렌더링, 강제 렌더링될 때)
  • unmount 될 때 (dom에서 제거되어 화면에서 사라질때)
    수행된다.

useEffect 사용법

• useEffect는 두개의 arguments를 받는다. (callback function과 dependency array, dependency array는 필수가 아니다.)
  • 1) callback function만 넘기는 경우
    useEffect(() => { // 실행될 작업 }) : 렌더링될 때 마다 실행
  • 2) callback function과 dependency array를 모두 넘기는 경우
    useEffect(() => { // 실행될 작업 }, [dependency array])
    • 2-1) dependency array가 빈 배열인 경우
      useEffect(() => { // 실행될 작업 }, []) : 처음 렌더링될 때만 실행
    • 2-2) dependency array에 props나 state를 작성한 경우
      useEffect(() => { // 실행될 작업 }, [prop, state]) : 처음 렌더링될 때 + props나 state의 value가 변경될 때 마다 실행

Effect Cleanup (종료하기)

• useEffect의 리턴 값으로 종료하기 위한 함수를 작성한다.

    useEffect(() => {
        const timer = setInterval(() => {
            console.log("타이머 작동중...")
        }, 1000)

        return () => {
            clearInterval(timer)
            console.log("타이머 종료")
        }        
    }, [])