State Lifecycle

Kingmo·2022년 4월 9일
0

1. Class Component의 생명주기(Life Cycle)

컴포넌트의 생명주기는 컴포넌트가 브라우저에 나타나고 업데이트 되고, 사라지게 될 때 호출되는 메서드이다.
이는 특정 시점에 코드가 실행되도록 설정할 수 있다는 것을 의미한다.

이 순서에 대해 간략히 요약한다면

  1. 그리기 : render
  2. 그리고 난 뒤 : componentDidMount
  3. 그리고 난 뒤 변경됐을 때 : componentDidUpdate
  4. 그리고 난 뒤 사라질 때 : componentWillUnmount

이를 간단히 확인하고 싶다면 아래코드로 확인할 수 있다.

export default class CounterPage extends Component {
  componentDidMount() {console.log("마운트 됌!")}
  componentDidUpdate() {console.log("수정되고 다시그려짐!")}
  componentWillUnmount() {console.log("컴포넌트 사라짐!")}
}

2. Functional Component의 생명주기(Life Cycle)

useEffect

클래스형 컴포넌트에는 componentDidMount와 같은 생명주기 메서드들이 있고, 함수형 컴포넌트에는 생명주기관련 훅이 있다.
그것은 바로 useEffect이다!!

클래스형 컴포넌트의 생명주기 메서드와 비교해 보여주겠다.

의존성배열 Deps

의존성 배열은 useEffect 훅에 입력하는 두 번째 매개변수로 함수가 실행되는지 안되는지에 의존한다.

따라서 useEffect는 의존성 배열의 내용이 변경됐을 때 부수 효과 함수가 실행된다.

useEffect(function, deps)

function : 실행하고자 하는 함수
deps : function을 실행시킬 조건, 배열형태이다.
따라서 여러 조건을 넣을 수 있다.
deps에 특정 값을 넣을 경우 컴포넌트가 mount될 때, 지정 값이 바뀔때 함수를 실행한다.

componentDidMount - useEffect

useEffect( () => {
	console.log("마운트 됌!")
},[] )

위와같이 의존성 배열[]에 아무것도 넣지 않으면 Mount시에만 함수를 실행하고 렌더해주고 끝나게 된다.
즉, 처음 Mount할 때 한번만 실행한다.

componentDidUpdate - useEffect(비슷할 뿐 똑같이 작동하지는 않는다.)

useEffect( () => {
	console.log("수정하고 다시 그려짐!")
} )

위 문은 의존성 배열이 없기 때문에 렌더링할 때마다 함수가 실행된다.

useEffect( () => {
	console.log("someState가 바뀔 때마다 다시 그려짐!")
}, [someState] )

위 문은 someState가 업데이트 되었을 때만 함수가 실행되는데, 처음 Mount시에 한 번 실행한다.

위 소제목에서 비슷할 뿐 똑같이 작동하지는 않는다라 한 부분이 바로 이부분이다.
componentDidUpdate는 Mount시에는 실행하지 않지만,
useEffect는 기본적으로 Mount되자마자 함수를 한 번 실행한다.

componentWillUnmount

useEffect( () => {
	console.log("수정하고 다시 그려짐!")
    
    // 이 부분이 끝나고 진행할 것들
  	return () => {
    	console.log("여기서 나갈래요!")
    }
}, [] )

위 문의 return () => {}은 컴포넌트가 사라질 때 실행하는
뒷정리하는 함수라 생각하면 된다.

profile
Developer

0개의 댓글