LifeCycle

컴포넌트를 사람에 비유해서 컴포넌트의 인생주기를 말한다.

• Mount (장착)
• Update (업데이트)
• UnMount (제거)

크게 세 가지의 주기를 뜻한다.

예를들어 컴포넌트의 세가지 주기 중 하나의 상태일때 작성한 어떤 코드를 실행할 수 있다.
중간중간 주기에서 코드를 실행할 수 있다.

사용법

예전의 Class컴포넌트를 사용했을때 사용법은

class Detail extends React.Component {
    componentDidMount() {
        // 컴포넌트가 장착될때 실행할 코드 
    }
    componentDidUpdate() {
        // 컴포넌트가 업데이트 될 때 실행할 코드 
    }
    componentWillUnmount() {
        // 컴포넌트가 삭제 될 때 실행할 코드 
    }
}

현재 리액트버전에서는 useEffect으로 사용할 수 있다.

리액트 공식문서에도 나와 있듯이

useEffect hook은 componentDidMount와 com ponentDidUpdate, componentWillUnmount가 합쳐진 것
이라고 한다.

useEffect

useEffect에서는 2개의 인자가 있는데

• 첫번째 인자는 callback함수 자리이고,

• 두번째 인자는 dependency array이다.
  useEffect의 실행조건을 넣을 수 있는곳이다.

예제1)

dependency array를 넘겨주지 않을땐 매 렌더링마다 실행된다.

import { useEffect } from 'react';
function Detail() {
	useEffect( () => {
    	console.log('hello') // 컴포넌트 장착or업데이트or제거시 
    })
  	let [count, setCount] = useState(0);
 	return (
    	<button onClick={ () => {setCount(count + 1)}}>업데이트 test 버튼</button>
    ) 
}

위 처럼 컴포넌트가 사용되거나 제거 될 때 console창이 출력된다.
update 또한 마찬가지로 count 스테이트를 만들어 버튼을 누를때마다 변경시 console창이 출력된다.

그런데 useEffect내부가 아닌 바깥에서도 장착,업데이트,제거시 똑같이 작동한다.

import { useEffect } from 'react';
function Detail() {
	console.log('useEffect 밖인데 출력이 됨');
  	let [count, setCount] = useState(0);
 	return (
    	<button onClick={ () => {setCount(count + 1)}}>업데이트 test 버튼</button>
    ) 
}

그 이유는

외부에서 작성한 코드일 경우 javascript 특성상 위에서 아래로 순서대로 그냥 코드를 읽어주는 것 뿐이다.

useEffect 안에 적는 코드들은 대부분
어려운 연산,
서버에서 데이터를 가져오는 작업,
타이머 같은것 등등 오래걸리는 작업일때 사용한다.



프로그래밍 용어로 함수의 핵심기능과 상관없는 부가기능들을 Side Effect라고 하는데

리액트를 만든 사람이 Side Effect를 참고해서 만든 함수명이라고 한다.

두 번째 인자를 사용해보자.

예제2)

두 번째 인자 dependency array를 통해 조건부로 실행시킬 수 있다.

function Detail() {
	const [count, setCount] = useState(0);
    const [count2, setCount] = useState(0);
    useEffect(() => {
        console.log("조건부 : count변경시 출력")
     }, [count]);
 	return(
    	<button onClick={() => setCount(prevCount => prevCount+1)}>버튼1</button>
        <button onClick={() => setCount2(prevCount => prevCount+1)}>버튼2</button>
    )
}

count, count2 두 개의 state를 만들었다.
두 번째 인자인 dependency array 자리에 count를 작성했다.
count가 변경이 될 때 console창이 출력 된다는 조건부이다.
state변경(count)뿐만 아니라 props가 변경되어도 같이 동작한다.

결과는

조건부인 인자에 count2가 아닌 count가 오기때문에
버튼1을 누르게되면 console창이 출력 되고
버튼2를 누르게되면 아무것도 출력되지 않는다.

예제3) 한번만 실행 하고싶을때

두 번째 인자 dependency array자리가 빈값이면 useEffect 코드가 한번 만 실행 한다.

function Detail() {
	const [count, setCount] = useState(0);
    useEffect(() => {
        console.log("조건부 : count변경시 출력")
     }, []);
 	return(
    	<button onClick={() => setCount(prevCount => prevCount+1)}>버튼</button>
    )
}

최초 컴포넌트 mount시 1회만 실행 된다.
count버튼을 눌러 컴포넌트 주기가 업데이트가 되어도 useEffect내 코드가 실행되지 않는다. console창 출력이 안됨.

예제4) clean-up 함수

useEffect 동작 전에 실행되는 return ( ) => { }



말 그대로 useEffect가 작동 전에 실행 되는 함수이다.

function Detail() {
    useEffect(() => {
        console.log(1);
  		return () => {
  			console.log(2); 
  		}
     })
}

2가 먼저 출력이 되고 1이 출력된다.

useEffect로 타이머 기능을 만들었다고 가정해보자
react 특성상 재렌더링이 매우 잦다.

무슨 버튼만 눌러도 변경만해도 재렌더링 되서 타이머기능이
계속 작동할 수가 있다.

그걸 방지하기 위해서 예제3 처럼 했다.
예제3처럼 인자를 비워놓고 해도 상관은없다.
편법 비슷한 것 이라고 한다.

다른 방법으로는 clean-up함수를 사용하면 된다.
우리가 뭔가를 하기 전에 정리를 먼저 하고 하듯
useEffect가 작동 전 실행되는 함수이다.

function Detail() {
	let [alert, setAlert] = useState(true);
    useEffect(() => {
        let timer = setTimeout( () => { setAlert(false) }, 5000)
  		// useEffect내 clean-up 함수!!
  		return () => {
  			clearTimeout(a);   
  		}
     }, []);
 	return(
    	{
  			alert == true
  			? <div className="alert alert-warning">5초이내 구매시 할인</div>
  			: null
  		}
    )
}

위와같이 useEffect 작동 전 중복되는 타이머의 기능을 생각해서
clean-up함수로 타이머 기능이 중복되지 않게 setTimeout을 제거 해줬다.

clean-up 함수는 처음에 mount될 때 실행이 안되고 unmount될 때 실행된다.

정리

useEffect( () => { // 재렌더링마다 실행하고 싶은 코드 } ) 
  
useEffect( () => { // mount시 1회만 실행하고 싶은 코드 }, [])
  
useEffect( () => { 
  	// useEffect 작동 code 
  	return () => {
  		// unmount시 1회만 실행하고 싶은 코드
  	}
})