[React] 클래스형 컴포넌트의 생명주기함수 vs 함수형 컴포넌트의 훅 비교

 

 

 

 

 

 

 

◽ 클래스형 컴포넌트 vs 함수형 컴포넌트

클래스형 컴포넌트는 생명주기 함수를 갖고, 함수형 컴포넌트는 훅(Hook)을 갖는다.

리액트는 함수형 컴포넌트를 지향하며, class형 컴포넌트 지원을 멈추지는 않겠지만 앞으로는 사용을 지양하라고 한다.

 

 

◽ 클래스형 컴포넌트 vs 함수형 컴포넌트의 비교

분류	클래스형 컴포넌트	함수형 컴포넌트
Mounting	constructor()	함수형 컴포넌트 내부
Mounting	render()	return()
Mounting	ComponentDidMount()	useEffect()
Updating	componentDidUpdate()	useEffect()
UnMounting	componentWillUnmount()	useEffect()의 return

 

 

◽ 클래스형 컴포넌트의 생명주기함수와 동일한 방식으로 구현해보자

1. componentDidUpdate(), getDerivedStateFromProps()

동일 컴포넌트 업데이트 작업 완료 후 실행되는 메소드이다.

useEffect(() => {
    // code...
}, [props명, state명, ...])

 

2. componentDidMount()

마운트 이후 1회만 실행된다.

useEffect(() => {
    // code...
}, [])

 

3. componentWillUnmount()

마운트 이후 1회만 실행된다.

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    // Clean up the subscription
    subscription.unsubscribe();
  };
});

useEffect(() => {
    return () => {
        // 여기에 unmount나 unsubscribe 코드 작성
    }
}, [props명, state명, ...])

 

 

---

 

 

출처

React.js 함수형 컴포넌트의 생명주기(Life Cycle)