클래스 생명주기와 함수형 생명주기

Class 컴포넌트 라이프사이클

Mount - 처음 화면에 그려질 때

1. constructor 컴포넌트의 생성자 메서드. 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드
2. getDerivedStateFromProps props로 받아 온 것을 state에 넣어주고 싶을때 사용한다. 다른 생명주기 메서드와 달리 static을 필요로 하고, 이 안에서는 this를 조회할 수 없다. 여기서 특정 객체를 반환하게 되면 해당 객체 안에 있는 내용들이 컴포넌트의 state로 설덩. 반면 null을 반환하면 아무일도 발생하지 않는다.이 메서드는 컴포넌트가 처음 렌더링 되기 전에도 호출 되고, 그 이후 리렌더링 되기전에도 매번 실행된다.
3. render 컴포넌트를 렌더링하는 메서드
4. componentDidMount 컴포넌트의 첫번째 렌더링이 마치고 나면 호출되는 메서드. 이 메서드사 호출되는 시점에는 우리가 만든 컴포넌트가 화면에 나타난 상태.여기선 주로 axios, fetch 등을 통하여 요청 및 DOM의 속성을 읽거나 직접 변경하는 작업을 진행한다.

Update - 컴포넌트가 업데이트 될 때

props가 바뀔 때, state가 바뀔 때, 부모 컴포넌트가 리렌더링 될 때, this.forceUpdate로 강제로 렌더링을 트리거할 때

1. getDerivedStateFromProps 컴포넌트의 props나 state가 바뀌었을때도 이 메서드가 호출된다.
2. shouldComponentUpdate 컴포넌트가 리렌더링 할지 말지를 결정하는 메서드, 주로 최적화할 때 사용하는 메서드
3. render
4. getSnapshotBeforeUpdate 컴포넌트에 변화가 일어나기 진적의 DOM상태를 가져와서 특정 값을 반환하면 그 다음 발생하게 되는 componentDidUpdate함수에서 받아와서 사용할 수 있다.
5. componentDidUpdate 리렌더링이 마치고, 화면에 우리가 원하는 변화가 모두 반영되고 난 뒤 호출되는 메서드다.

Unmount - 컴포넌트가 화면에 사라질 때,

1. componentWillUnmount 컴포넌트가 화면에 사라지기 직전에 호출한다. 여기서는 주로 DOM에 직접 등록했었던 이벤트를 제거하고, 만약에 setTimeout 등이 있다면 clearTimeout을 통하여 제거해주면 된다.

함수형 컴포넌트 생명주기

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

useEffect(() => {

})

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

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

useEffect(() => {

}, [])

마운트 이후 1회만 실행

componentDidUpdate() & getDerivedStateFromProps() : 컴포넌트 업데이트 작업 완료 후 실행되는 메소드

useEffect(() => {

}, [props명, state명...]);

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

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

useEffect(() => {

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

effect(함수 혹은 변수 등)가 필요 없어지면 return 함수 실행하여 메모리 반환(언마운트 혹은 구독 취소 시에 사용)

 

클래스형 컴포넌트

특징

• render()메소드와 Component 상속 필수

단점

• state, props 사용 불편, 많은 메모리를 사용

함수형 컴포넌트

특징

• 간편한 컴포넌트 선언 및 프로그래밍 가능
• React Hook을 사용

단점

• state와 생명주기 메소드를 별도로 구현해야 함
• useState, useEffect 사용

함수형 컴포넌트 성능이 클래스형 컴포넌트보다 조금 더 빠르다.