React : useEffect사용법과 LifeCycle이란?

컴포넌트의 Lifecycle 이란 컴포넌트의 인생주기와도 같다.

Q. 그게 무슨소리임...?

 

페이지에 불러와질때 (mount)

페이지에 이미지/숫자/텍스트등 변경이 될때 (update)

페이지에서 벗어날때 (unmount) 를 말한다.

 

우리는 이걸 알아야지 useEffect를 좀더 깊이있게 사용할수 있을꺼라고 나는 생각한다.

 

Q. 그전에 useEffect가 정확히 무슨 역활을 하는Hook인데?

useEffect는 mount / update / unmount 될때 코드를 실행시켜주는 Hook이다.

 

Q. 그래서 왜 쓰는데?

useEffect는 HTML이 모두 랜더링 된 이후에 실행된다.

 

Q. 어쩌라고 그게 뭐 어쨌는데

^^....

자바스크립트 동작순서는 위에서부터 아래로 내려오면서 하나하나 코드를 읽어간다.

근데 만약 중간에 불러오는데 100초가 걸리는 자바스크립트 코드가 있다면 우리는 100초를 기다린후에 

HTML화면을 볼 수 있다. 8282민족에게는 절대 있을수 없는일이고 있어서도 안된다.

 

그때 useEffect에 100초가 걸리는 자바스크립트 코드를 작성해주면?

useEffect(()=>{ 100초가 걸리는 코드 })

모든 랜더링을 완료하고 100초가 걸리는 코드를 불러와 실행시키게된다.

 

Q. 미안 아직도 이해를 못하겠어... 

나또한 이해하는데 오래걸렸으니 내기준에서 쉽게 설명해주겠다.

우린 탕수육이 먹고싶어서 중국집을 가서 일반짜장1개 간짜장1개 그리고 탕수육을 시켰다.

여기서

탕수육 = HTML / 일반짜장면 = 간단한코드 / 간짜장 = 복잡한코드 이라고해보자

 

보통 탕수육 > 일반짜장 > 간짜장 순으로 나올것이다.

왜냐면 만들기 쉬운 순서로 먼저 밥상에 올라가기 마련이다. 그래야 순환이 빠르기 때문이다.

우린 탕수육이 중국집 방문의 주 목적이니 더 좋다.

근데 만약 간짜장을 먼저 만들고 그이후에 일반짜장 그리고 짜장면을 다먹어가는 타이밍에 탕수육이 나온다면??

 

생각만해도 킹받는다. 나라면 주문을 취소해달라고 할것이다.

 

위 상황처럼 사용자가 쿠팡 홈페이지를 들어갔는데 흰색페이지만 주구장창뜨다 100초뒤에 화면이 나온다면?

5000천만 국민중 그걸 기다리는 사람이 과연 몇명이나 있을까? 없다고 생각한다. 

 

그러기때문에 useEffect를 사용해서 100초나 걸리는 작업을 재쳐두고 화면먼저 보여주는것이다.

영화 시작은 안했지만 상영관에 입장시키는것처럼

놀이기구는 운영하지않지만 입장시키는 놀이동산처럼

입장하진 않았지만 밖에서 미리 주문받는 식당처럼

 

연산이 끝나진 않았지만 페이지를 먼저 보여줘서 다른거라도 하고있게끔 만드는것이다. 

이제 이해됬나요?

 

그럼 이제 사용법에 대해 알아보도록 하자.

 

1. 먼저 import를 해야지 사용할 수 있다.

import {useEffect} from 'react';

 

2. 컴포넌트 return 문 위에다 작성을 해준다.

// 랜더링혹은 재랜더링 될떄마다 실행하고 싶을때 
useEffect(()=>{ 실행할코드 }) 

// 랜더링이 될떄 딱 한번만 실행하고 싶을때 (재랜더링❌)
useEffect(()=>{ 실행할코드 },[])

// 지정한 변수/스테이트 에 변동이 있을때만 실행하고 싶을때 (첫 랜더링때 실행 됨)
useEffect(()=>{ 실행할코드 },[state명])

이게 전부이다. 하지만 우리는 무거운 작업을 할때 사용할꺼고

이전에 만약에 엄~~~청 무거운 파일을 가져왔는데 랜더링되면서 그 파일을 또가져온다면 ? 무게는 두~배~✌️

그럴때는 이전에 가져온 파일을 제거하고 다시 가져와되지 않을까요~?

 

+ 이전작업은 제거하고 다시 useEffect를 실행하는방법

useEffect(()=>{
	작업할 코드
    
    return()=>{
    작업할 코드
    }
})

 

Q. 리턴문은 뭐임? 개복잡해 ;;; 

 

리턴문 = useEffect 실행전에 실행됨 

 

Q. 이건또 뭔소리야 ;;;

 

 탕수육 먹기전에 식탁한번 닦아준다고!! 

 

특히 타이머 같은경우 

60초를 설정하면 60 59 58 57 56 55 .....  0초 까지 데이터가 쌓일텐데 랜더링 될때마다 이게 동작된다면?? 

시간만 초기화 되는게아니라 우린 타이머를 1개더 구매한것과 동일하다 타이머 2개 3개 4개 5개가 동시에 작동하고있는거고

그만큼 과부하가 올것이다. 그때 사용하는것이 useEffect안에 return문이다.

 

이전타이머는 깔끔하게 제거하고 새타이머를 켜주는것이다. 

    useEffect(() => {
        const timer = setTimeout(() => { setAlert(false) }, 2000)
    
        return () => {
            // 타이머는 보통 변수에 담아두고 사용하고 clearTimeout을 사용해 이전 타이머를 제거해준다.
            clearTimeout(timer)
            // unmount 돨떄 한번더 실행된다.
        }
    }, [])

타이머는 보통 변수에 담아서 사용하고 

타이머를 삭제할떄는 clearTimeout(변수명) 을 사용한다. 

 

 

끝