React Life Cyle

리액트는 UI의 구성단위인 component라는 요소를 가지고 있다.
이 component를 활용해서 UI의 재사용, UI의 다양한 활용 및 제거를 더욱 편리하게 해낼 수 있다.
또한 이 component는 생성->업데이트->제거 생명주기 (life cycle)을 가진다.
이 라이프 사이클에 대해서 정리를 해보십시다.

참조: https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ (리액트 생명주기 다이어그램)
https://reactjs.org/docs/state-and-lifecycle.html (리액트 공식문서)

Mount (생성)

리액트에서의 마운트란,
리액트의 DOM에 component가 생성 되는 것을 말한다

마운트는 component가 새로이 생성되는 시점이다.
constructor함수가 실행되어 render되기 전에 ( 즉, 화면에 보여지기 전에) component 가 생성되어 DOM에 업데이트 되는 과정이다.

constructor()

생성자 함수이다.
주로 state를 선언/초기화 하는 역할을 한다.

class Example extends Component {
  constructor(){   
  super();       
  this.state = { //state 선언
    id: "",        
    pw: ""
  };
)

constructor 특징 :

• constructor 을 사용할 이유가 없을경우 굳이 부르지 않아도 된다.
• constructor 을 사용할 경우 super()을 필수로 불러서 state를 선언해야 한다.
• mount 되기 전에 constructor내에서 setState를 통해 업데이트 해서는 안된다.
  필요하다면 state선언을 하고 mount이후에 setState를 사용한다.

render()

렌더, 즉 화면에 보여주는 역할을 한다.
state에 선언된 값을 활용하여 화면에 보여주고
setState 등을 통하여 값이 업데이트 되면, render는 다시 실행되어 업데이트 된 값을 보여준다.

render특징 :
-render 내에서 setState를 해서는 절대 안된다.
setState를 통해서 값이 바뀌어서 다시 render를 하는데 또 값이 바뀌고 또 렌더하는 무한루프에 빠진다.

componentDidMount()

컴포넌트가 DOM에 마운트 된 직후, 실행된다.
DOM노드가 있어야하는 초기화 작업을 여기서 실행하고 데이터를 받아오거나 네트워크 작업을 요청해야 하는 경우에도 사용한다.

componentDidMount 특징:

• 마운트가 되는 시점 단 한번만 실행된다.
• 단 한번만 실행되는 특징을 이용해 api를 요청하는 등의 네트워크 작업을 여기서 요청한다.