[React] 컴포넌트의 Lifecycle

배경

컴포넌트의 인생.. 컴포넌트는 어떻게 살다가 죽을까?

생성되었다가 다른 페이지로 넘어가면 삭제되기도 한다! state가 바뀌면 업데이트(재렌더링)가 되기도 한다!

중간중간 Hook을 걸 수 있다. (삭제전에 이거 해줘! 이 컴포넌트 등장 전에 이거해줘!)

=> Hook으로 컴포넌트 인생 중간에 명령을 줄 수 있다.

 

예전에 class로 컴포넌트만들었을 때!

주로 쓰는 라이프사이클 훅은 아래와 같았다.

class Modal extends React.Component {
	componentDidMount() {
    // Modal 컴포넌트가 Mount(등장)했을 때 실행할 코드 ex) ajax 주로 사용한다
    }
    
    componentWillUnmount() {
    // Modal 컴포넌트가 사라지기 직전에 실행할 코드
    }
}

 

요즘은! useEffect 훅

1. useEffect를 react 라이브러리에서 import해온다.

2. 컴포넌트 함수 내에서 useEffect(() => {})하여 사용한다.

- 컴포넌트가 mount(등장)되었을 때, 컴포넌트가 update될 때, 특정 코드를 실행할 수 있다.

- 컴포넌트가 unmount 사라질 때, 코드를 실행할 수 있다. 

useEffect(() => {
	return function 함수명() {실행할코드 ~~ } // 사라질 때 코드가 실행된다.
})

3. 여러개 사용가능

4. 조건 기능

다른 컴포넌트가 바뀌면 useEffect의 기존 것도 계속 재렌더링이 된다 (자원낭비) => useEffect를 예쁘게 써야한다!

특정state가 변경될 때만 실행해달라고 하면 된다!!

    useEffect(() => {
        // 실행할 코드
        
    }, [실행조건 state]);

실행조건에 있는 state가 변경될 때 실행된다.

실행조건에 있는 state를 여러 개 입력하고 싶으면 [state1, state2] 이런 식으로 추가하면 되고,

[]만 있을 경우에는 _state 아무것도 없는 공허한 state가 변경될 때 실행해달라는 뜻이므로 한번 딱 실행되고 코드가 영영 실행되지 않는다.

 

*참고 : 컴포넌트 내에서 setTimeout 실행시 주의점

컴포넌트가 사라질 때 타이머를 해제하는 것을 추가해야한다. clearTimeout