Lifecycle과 useEffect

Component의 인생

Component는 Lifecycle이라는 개념이 있다.

이 Lifecycle에 맞춰 코드를 실행할 수 있다.

1. 생성 mount

2. 재 렌더링 update

3. 삭제 unmount

 

 

출처 : 코딩애플

 

 

Component 인생에 간섭하는 법

• Detail 컴포넌트 등장 전에 이것좀 해줘
• Detail 컴포넌트 사라지기 전에 이것좀 해줘
• Detail 컴포넌트 업데이트 되고 나서 이것좀 해줘

이렇게 컴포넌트 라이프 사이클에 맞춰 코드를 실행해달라고 간섭할 수 있는데, 간섭은 갈고리를 달아서 한다.

갈고리는 영어로 hook, 그래서 이것을 Lifecycle hook 이라고 부른다.

출처 : 코딩애플

 

 

Lifecycle hook 사용법, useEffect()

상단에서 useEffect를 import 한다

콜백함수를 추가해서, 그 안에 코드를 적으면 그 코드는

컴포넌트가 mount, update 시 실행된다.

이것이 Lifecycle hook 이다!

import {useState, useEffect} from 'react';

function Detail(){

    useEffect(()=>{
        //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨
        console.log('안녕')
    });

    return (생략)
}

 

왜 '안녕'은 2번 출력 됨?

index.js에 <React.StrictMode>라는 태그가 있으면 2번 출력해줍니다.

디버깅용이다.

 

 

 

useEffect 밖에 적어도 똑같은데요?

비슷한것 같지만 useEffect 안에 적은 코드는 html 렌더링 이후에 동작한다.

 

예를 들어서 시간이 많이 걸리는 코드가 필요한 경우 useEffect 안에 써주면, html을 먼저 보여주고 나서 반복문을 돌리게 된다.

function Detail(){

    useEffect(()=>{
    	(반복문 10억번 돌리는 코드)
    });

    return (생략)
}

 

 

 

useEffect() 에 넣을 수 있는 실행조건, 둘째 파라미터

useEffect()의 둘째 파라미터로 [ ] 를 넣을 수 있는데, 이곳에는 변수나 state를 넣을 수 있다.

그렇게 하면 [ ] 안의 변수나 state가 변할때만 useEffect 안의 코드를 실행해준다.

그래서 아래의 코드는 count 라는 변수가 변할때만 실행된다.

useEffect(()=>{ 실행할코드 }, [count])

 

[ ]안에 아무것도 넣지 않으면 mount 시(로드 시) 1회 실행하고 영영 실행해주지 않는다.

useEffect(()=>{ 실행할코드 }, [])

 

 

 

clean up function

useEffect() 동작하기 전에 특정 코드를 실행하고 싶으면

return ()=>{} 안에 넣을 수 있다. 이것을 clean up function 이라고 한다.

 

실행순서 : return 먼저,  그다음 useEffect

useEffect(()=>{ 
    그 다음 실행됨
    
    return ()=>{
    	여기있는게 먼저실행됨
    }
}, [count])

 

타이머같은 경우, mount 될때마다 타이머를 제거해주는 것이 좋다.

useEffect(()=>{ 
    let a = setTimeout(()=>{ setAlert(false) }, 2000)
    return ()=>{
    	clearTimeout(a)
    }
}, [])

 

 

(참고1) clean up function에는 타이머제거, socket 연결요청제거, ajax요청 중단 이런 코드를 많이 작성한다.

(참고2) 컴포넌트 unmount 시에도 clean up function 안에 있던게 1회 실행된다.

 

 

 

 

?