Lifecycle Hook과 useEffect

라이프스타일이란 컴포넌트의 인생이라고 한다. 등장하고 업데이트(재렌더링)되고, 퇴장하는 이런 것을 뜻한다. 이런 중간중간에 Hook을 걸 수 있는데, 예를 들면, 생성되기전에 이것 좀 해줘! 하고 훅을 걸거나 퇴장하기 전에 이거하고 퇴장해줘 이렇게 훅을 걸 수 있다. 이런 식으로, 컴포넌트의 인생 중간중간에 뭔가 명령을 주는 것을 Hook라 한다. 

간단히 알아보자.

 

class 컴포넌트들만 사용가능하며,

class Detail2 extends React.Component {
  componentDidMount(){
    //Detail2 컴포넌트가 Mount 되고나서 실행할 코드
  }
  componentWillUnmount(){
    //Detail2 컴포넌트가 Unmount 되기전에 실행할 코드
  }
}

위의 두 함수가 가장 많이 쓰인다. 컴포넌트가 보이고나서 하거나, 컴포넌트가 사라지기 전에 할 코드를 작성하는 것이다.

 

하지만 더 간단한, useEffect 훅이 생겨났다.

import { useEffect } from 'react';

상단에 import를 해온 뒤, function의 return밖에

useEffect( () => {
      
});

이렇게, 사용한다. useEffect 훅은 컴포넌트가 mount되었을 때, update가 되었을 때, 특정코드를 실행할 수 있다. 

 

그리고 useEffect훅은 컴포넌트가 사라질 때 코드를 실행할 수도 있다. 어떤 컴포넌트가 사라지거나 다른 컴포넌트로 이동할 때가 예시이다. 이럴땐

useEffect( () => {
      return function 작명() {실행할 코드~~~~}
});

이렇게 useEffect안에 return function을 적어서 해당 컴포넌트가 사라질 때(unmount)될 때 함수가 실행된다.

 

마지막으로, 실행할게 많을 때 여러개를 사용하고 싶다면, useEffect를 두개, 세개, 네개 연달아 적어서 위에서부터 순서대로 실행되게끔 할 수 있다.

 

useEffect 예시를 들어 2초 뒤 모달창이 사라지는 UI를 만들어보자

function () {
    let [modal, modal변경] = useState(true);

	useEffect( () => {
    	 let 타이머 = setTimeout(function() {
       	modal변경(false);
     	},2000);
        return function 타이머제거() { clearTimeout(타이머) }
	});//위처럼 setTimeout은 끝날때 타이머를 제거해주면 버그를 주의할 수 있다.
    
    return(
    	{
          modal == true
          ? <Modal></Modal>
          : null
        }
    )
}

이런 식으로, UI가 사라지게할때 state를 이용해야 한다. 초기 상태를 true 로 해놓고 useEffect를 이용해 컴포넌트가 등장시에 2초뒤 false로 바뀌며 삼항연산자에 의해 사라지게 된다. 하지만 이러면 컴포넌트가 업데이트 될 때도 동작한다.

 

만약 input태그를 만들어서

let [input, input변경] = useState('');


return (
		{input}
		<input type="text" onChange={(e)=> {input변경(e.target.value)}}/>
        )

이렇게 해서 input안에 뭔가가 입력되면 해당 컴포넌트가 재렌더링(업데이트)이 일어난다. 이럴때 위에 적은 useEffect가 계속 실행된다. 위에 2초 후 사라지는 Effect는 맨처음 로드될 때만 실행하고 싶은데 업데이트가 될 때마다 일어나게 된다.

이럴땐 useEffect에 []를 열어 특정state가 변경될 때만 실행주세요라고 코드를 짜면 된다.

let [modal, modal변경] = useState(true);

useEffect( () => {
      let 타이머 = setTimeout(function() {
        modal변경(false);
      },2000);
 },[modal]);

이런 식으로, 대괄호를 쓰고 안에 state이름인 modal을 적어주면 modal state가 변경될 때만 실행하게된다.

 

이를 응용해서 만약 []에 아무것도 쓰지 않으면 컴포넌트가 등장할 때 한번 실행하고 끝이난다.