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

 

리액트는 클래스형과 함수형으로 컴포넌트를 생성할 수 있는데, 주로 함수형 컴포넌트가 많이 사용된다.

 

이유가 무엇일까?

 

함수형 컴포넌트의 가장 큰 장점으로는 간단하게 함축적인 프로그래밍이 가능하다는 것이다.

 

각각의 특징을 표로 정리해 보았다.

 

	클래스형 컴포넌트	함수형 컴포넌트
특징	render() 메소드와 Component 상속 필수	간편한 컴포넌트 선언 및 프로그래밍 가능 React Hook을 사용
단점	state, props 사용 불편 많은 메모리 사용	state와 생명주기(Life Cycle) 메소드를 별도로 구현해야 함 => useState, useEffect 사용

 

보통 서점에서 리액트 서적을 구입하면 클래스형 컴포넌트 기준으로 주로 기술되어 있어서 처음 리액트를 공부하는 사람들은 복잡한 코드에 진입 장벽을 많이 느낀다. (자기소개임)

 

하지만 함수형으로 컴포넌트를 선언하면 간결한 코드와 쉬운 난이도로 프로그래밍을 할 수 있다!

 

나도 함수형을 많이 사용하긴 하지만 사람 일은 어떻게 될 지 모르기에 클래스형 컴포넌트도 열심히 공부하자!

 

함수형 컴포넌트의 유일한 단점인 생명주기도 React Hook의 useEffect를 이용하여 간편하게 구현할 수 있다.

 

아래 대표적인 생명주기의 예시 코드를 정리해 보았다.

 

 

useEffect

: React Hook에서 라이프사이클 구현에 사용되는 함수

useEffect(() => {
	// 여기에 코드를 적자
})

=> 2번째 파라미터를 주지 않으면 모든 컴포넌트가 리렌더링될 때마다 실행(메모리 과다 사용...)

 

componentDidMount()

: 렌더링이 완료된 후 호출되는 메소드

useEffect(() => {
	// 여기에 코드를 적자
}, [])

=> 마운트 이후 1회만 실행

 

componentDidUpdate() & getDerivedStateFromProps()

: 컴포넌트 업데이트 작업 완료 후 실행되는 메소드

useEffect(() => {
	// 여기에 코드를 적자
}, [props명, state명, ...])

=> 2번째 파라미터 배열에 명시한 변수가 변경될 때만 실행

 

componentWillUnmount()

: 컴포넌트가 DOM에서 제거될 때 호출되는 메소드

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

=> effect(함수 혹은 변수 등)가 필요없어지면 return 함수 실행하여 메모리 반환

(언마운트 혹은 구독 취소 시에 사용)