클래스 컴포넌트보다 함수형 컴포넌트를 많이 사용하긴 하지만 클래스 컴포넌트에서 사용되는 라이프사이클 메서드를 알아보자!

🔗 Lifecycle

리액트 컴포넌트는 컴포넌트가 브라우저에 렌더링되기 전부터 페이지에서 사라질때까지의 생명주기(Lifecycle)가 존재한다. 라이프사이클은 클래스 컴포넌트에 제공되는 메서드로 함수형 컴포넌트에서는 라이프사이클에 따른 기능구현이 불가하다.(Hook으로 대체)

라이프사이클은 크게 마운트(생성될 때), 업데이트, 언마운트(제거될 때) 총 세 가지로 나뉜다.

🔗 Mounting

컴포넌트가 로딩되기 시작하면서 DOM이 생성되고 웹 브라우저에 나타나는 것

constructor

컴포넌트의 생성자 메서드로 클래스에서 생성자보다 먼저 실행되는 로직은 없기때문에 이 단계에서는 JSX가 보이지 않는다.

construtor(props){
	super(props) 
    this.state = {name: "sumin"}
}

생성자 내부에는 초기 state를 정할 수 있다.

getDerivedStateFromProps

부모 컴포넌트에서 전달된 props와 state를 가져와 설정하는 시점으로 props를 state에 동기화시키는 용도로 사용한다.

render

생성자 이후 실행되는 메서드로 이 메서드가 실행되면서 JSX가 HTML로 변환되어 우리가 보는 웹브라우저에 나타나게 된다. 라이프사이클 중 필수 메서드로 함수형 컴포넌트에서는 render없이 return을 사용하여 컴포넌트를 렌더링한다.

componentDidMount

컴포넌트가 모두 렌더된 이후 실행되는 메소드로 컴포넌트의 데이터가 업데이트 되어도 다시 수행되지 않는다.

🔗 Updating

리액트는 컴포넌트의 업데이트를 현재 컴포넌트에서 state나 props가 변경될 때나 부모컴포넌트의 리렌더링될 때나 this.forceUpdate( ) 메서드로 강제 리렌더링을 하게끔할 때로 판단한다.

getDerivedStateFromProps

마운팅 단계에서도 있었던 메서드로 props의 변화에 따라 state를 변경하고플 때 사용한다.

shouldComponentUpdate

컴포넌트의 리렌더링을 결정하는 메서드로 boolean 값을 반환하여 true를 반환하면 render가 호출되고 false가 반환되면 리렌더링이 이러나지 않는다. 만약 다른 컴포넌트에서 this.forceUpdate( )가 호출되면 shouldComponentUpdate메서드를 생략하고 render가 호출된다.

render

state의 변경사항을 감지해 변경된 부분을 다시 웹브라우저에 그려준다.

componentDidUpdate

컴포넌트의 변경이 완료되었을 때 수행되는 메서드로 업데이트 전의 state와 props, 업데이트 후의 state와 props를 비교할 수 있다.

🔗 Unmounting

컴포넌트가 DOM에서 제거되어 화면에서 사라지는 시점이다.

componentWillUnmount

컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드이다.