리액트에 있는 라이프사이클과 각 라이프사이클의 역할을 설명하세요.

React의 모든 컴포넌트는

초기화 단계, 업데이트 단계, 소멸단계를 거칩니다. 

이러한 흐름을 Lifecycle 생명주기 라고 합니다.

 

초기화 단계는 최초에 컴포넌트 객체가 생성 될 때 한번 수행되는 과정입니다.
업데이트 단계는 컴포넌트가 마운트 된 이후 컴포넌트의 속성값(props) , 상태값 (state)이 변경되면 업데이트 단계가 실행 됩니다.
소멸단계는 컴포넌트가 소멸 할 때의 과정입니다.

초기화 단계

• 초기화 단계는 최초에 컴포넌트 객체가 생성 될 때 한번 수행되는 과정입니다.
• 초기와 단계에서 실행되는 함수
  • Constructor() :
    • 메소드를 바인딩하거나 state(상태)를 초기화 하는 작업이 없다면 constructor(생성자)가 없어도 됩니다 .
    • react 컴포넌트의 constructor(생성자)는 해당 컴포넌트가 마운트 되기 전에 호출됩니다.
    • 생성자를 구현하면 this.props가 생성자 내에서 정의 되도록 super(props)를 호출해야 합니다.
    • state의 값을 변경하고자 한다면 , constructor() 외부에서 this.setState()를 통해 수정해야 합니다.
  • render()
    • Class 컴포넌트에서 반드시 구현되어야 하는 유일한 메소드 입니다.
    • 이메소드가 호출되면 this.props와 this.state의 값을 활영하여 값을 변환합니다 .
    • render()함수는 컴포넌트의 state를 변경하지 않고 호출 될 때마다 동일한 결과를 반환하며 브라우저와 직접적인 상호작용을 하지 않습니다.
  • componentDidMount()
    • 컴포넌트가 마운트 된 직후에 호출됩니다.
    • DOM 노드가 있어야 하는 초기화 작업이 이루어지면 좋습니다.
    • 외부에서 데이터를 불러와야 한다면 네트워크 요청을 보내기 좋은 위치입니다.

업데이트 단계

• 업데이트 단계는 컴포넌트가 마운트 된 이후 컴포넌트의 속성값(props) , 상태값 (state)이 변경되면 업데이트 단계가 실행 됩니다.
• 업데이트 단계에서 실행되는 함수
  • componentDidUpdate()
    • render가 일어난 직후에 호출되며 최초 랜더링에서는 호출 되지 않습니다.

소멸단계

• 소멸단계에서는 컴포넌트가 소멸 할 때의 과정입니다.
• 소멸단계에서의 함수
  • componentWillUnmount()
    • 컴포넌트가 마운트 해제되어 제거되기 직전에 호출 됩니다.
    • 타이머 제거, 네트워크 요청 취소, componentDidMount()에서 생성된 작업 등을 정리할때 사용됩니다.
    • 실행직후 컴포넌트는 랜더링 되지 않으므로 setState() 호출을 하면 안됩니다.

---

Reference
https://velog.io/@delilah/React-5-Component-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%9D%98-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0
https://velog.io/@lee_geon_woo4336/React-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0-%EB%B0%8F-Class%ED%98%95%EA%B3%BC-%ED%95%A8%EC%88%98%ED%98%95-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90