[React] 함수형 컴포넌트 생명주기

리엑트는 클래스형과 함수형으로 컴포넌트를 생성할 수 있으나 함축적인 프로그래밍이 가능한 함수형 컴포넌트를 사용한다.

하지만 함수형 컴포넌트는 생명주기를 별도로 구현해야 한다는 점이 유일한 단점인데

이도 React Hook의 useEffect를 이용하여 간편하게 구현할 수 있다.

 

그리하여 이번에는 생명주기를 정리해보고자 한다.

 

useEffect

useEffect(() => {
	//코드
})

 : 모든 컴포넌트가 리렌더링 될 때마다 실행

 

componentDidMount()

useEffect(() => {
	//코드
},[])

: 한번만 실행

 

componentDidUpdate() & getDerivedStateFromProps()

useEffect(() => {
	//코드
},[props 및 state 명 (, 여러개 가능)])

: props 혹은 state 변경될 때에만 실행

 

componentWillUnmount()

useEffect(() => {
	//코드
    return () => {
    	// unmount , unsubscribe 코드 작성
    }
},[props 및 state 명 (, 여러개 가능)])

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

 

 

끝!

---

출처

https://guiyomi.tistory.com/21

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