[8주차] 리액트 생명주기란?

📌 리액트 생명주기(life cycle)에 대해 설명해 주세요.

---

• 컴포넌트는 3단계의 생명주기를 갖는다.

1. 생성 (mounting)
2. 업데이트 (updating)
3. 제거 (unmounting)

클래스 컴포넌트

마운트 (mount)

• constructor
  • 컴포넌트의 생성자 메소드
  • 컴포넌트가 생성되면 가장 먼저 실행된다.
  • 생성된 리액트 element를 return한다.
• getDerivedStateFromProps
  • props로 받아온 것을 state에 설정하고 싶을 때 사용한다.
• render
  • 컴포넌트를 렌더링하는 메소드
• componentDidMount
  • 첫번째 렌더링이 끝나면 호출되는 메소드
  • 컴포넌트의 마운트가 끝났다는 것을 알려준다.
  • 이 메소드가 호출되면 화면에 컴포넌트가 나타난 것이다.

업데이트 (updating)

• getDerivedStateFromProps
  • 컴포넌트의 props 또는 state가 바뀌었을 때 호출되는 메소드
• shouldComponentUpdate
  • 컴포넌트를 리렌더링 할지 말지를 결정하는 메소드
• render
  • 업데이트된 내용을 렌더링하는 메소드
• componentDidUpdate
  • 업데이트가 끝났다는 것을 알려준다.
  • 업데이트가 끝나면 호출된다.

언마운트 (unmount)

• 컴포넌트가 화면에서 사라지는 것을 의미한다.
• componentWillUnmount
  • 컴포넌트가 화면에서 사라지기 직전에 호출된다.

함수형 컴포넌트

• 함수형 컴포넌트에서는 클래스 컴포넌트의 생명주기 메소드들을 Hook으로 대신해 리액트 state와 생명주기 기능을 연동할 수 있다.
• constructor
  • useRef
  • useState
  • 로 한 번만 동작하는 hook을 만들어 대체할 수 있다.
• getDerivedStateFromProps
  • useState(initialState)
  • 에 초기 상태 값으로 props를 넣어주면 props를 state로 설치할 수 있다.
• render
  • 함수형 컴포넌트에서는 return값을 렌더링해주므로 return값이라고 볼 수 있다.
• componentDidMount
  • useEffect
• shouldComponentUpdate
  • React.memo
• componentDidUpdate
  • props, state를 useEffect의 deps로 사용한다.
• componentWillUnmount
  • useEffect에 callback을 return해서 사용한다.