[Today I Learned] 12월 2주차 day5

component lifecycle

리액트 컴포넌트는 탄생부터 죽음까지(브라우저에 그려지는 순간부터 사라지는 순간까지) 메서드를 오버라이딩 할 수 있게 해준다.
주로 클래스 컴포넌트에서 사용되는 개념이다.
클래스 컴포넌트는 라이프 사이클 메서드를 사용하고, 함수형 컴포넌트는 Hooks를 사용합니다.

• 컴포넌트는 생성(mounting) → 업데이트(updating) → 제거(unmounting)의 생명주기를 갖는다.
  

life cycle methods (생명주기 메서드들)

생성(mounting)

constructor (초기 state 지정)

class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
}

getDerivedStateFromProps
props로 받아 온 값을 state에 동기화시키는 용도로 사용하며, 컴포넌트가 마운트될 때와 업데이트 될 때 호출된다.

render
컴포넌트를 렌더링하는 메서드입니다.

componentDidMount
이 메서드는 컴포넌트를 만들고 첫 렌더링을 마친 후 실행한다. 함수형 Hooks 에서는 useEffect를 활용하여 다음의 기능을 구현할 수 있다.

업데이트(updating)

4가지 상황에서 update 발생
1. props가 바뀔 때
2. state가 바뀔 때
3. 부모 컴포넌트가 리렌더링 될 때
4. this.forceUpdate로 강제로 렌더링을 트리거할 때
메서드 종류(더 자세한건 구글링)
getDerivedStateFromProps , shouldComponentUpdate , componentDidUpdate

언마운트(unmounting)

메서드 종류(자세한건 구글링)
componentWillUnmount

[자세한내용]

리액트라이프사이클의 이해
리액트 공식문서