useEffect, 클래스형 컴포넌트 생명주기 메소드 대체

훅이 나오기 전 리액트의 생명주기는 클래스형 컴포넌트의 생명주기 메소드를 사용하였다.

- componentDidMount, componentDidUpdate, componentWillUnmount

 

하지만 훅이 나오면서 useEffect가 클래스형 컴포넌트의 생명주기 메소드를 대체하여 사용하고 있다.

 

기존 클래스형 컴포넌트의 생명주기 메서드를 함수형 컴포넌트에서는 어떻게 대체하는지 궁금해서 정리해본다.

 

클래스형 컴포넌트

mount

- componentDidmount

컴포넌트를 처음 렌더링 한 후, 최초로 렌더링 되는 시점에 단 한 번만 실행된다.

- useEffect

useEffect의 의존성 배열에 빈 배열을 전달하면 최초 렌더링 될 때 한 번만 실행됨

useEffect(()=>{
	console.log('componentDidmount');
},[]);

---

update

- componentUpmount

update는 props, state, 부모 컴포넌트가 렌더링 될 때, 강제 함수로 렌더링 될 때 발생한다.

- useEffect

1. state 아무거나 바뀔 때마다 실행

useEffect(() => {
	console.log('componentDidUpdate');
});

2. 특정 state가 바뀔 때마다 실행

useEffect(() => {
	console.log('componentDidUpdate');
}, [특정 state]);

 

---

unmount

- componentUnmount

컴포넌트가 DOM에서 제거될 때 사용한다.

 

- useEffect

return 함수가 componentUnmount 역할을 한다.

useEffect()를 끝내며 실행하기 때문에 clean-up함수라고 부른다.

useEffect(() => {
	console.log('componentDidmount');
    return() => {
    	console.log('clean-up , componentWillUnmount');
    }
}, []);

 

 

---

 

정리하기

useEffect로 생명주기 이해하기

 

componentDidmount => useEffect의 의존성 배열에 빈 값 전달

 

componentUpdatemount =>

1. 변화될 때마다 업데이트 하기 => useEffect 의존성 배열 사용 안 함(default = 모든 state)

2. 특정 state 변화될 때마다 업데이트 하기 = useEffect 의존성 배열에 특정 state 값 전달

 

componentWillUnmount =>  useEffect에 return 함수 사용 (clean-up함수)

의존성 배열을 사용하지 않으면 계속 사용되고 의존성 배열에 빈 값을 전달하면 작업이 끝날 때 단 한번 실행한다.