리액트 컴포넌트의 처리 흐름을 이해하기 위해 알아야 할 생명주기(LifeCycle)

라이프사이클 4단계

라이프 사이클은 크게 총 4가지 단계로 나뉜다.

1. Initialization
2. Mounting
3. Updation
4. Unmounting

리액트 라이프사이클은 전체 앱이 아닌 "컴포넌트 하나에 대한 생명주기"를 의미한다.

1. Initialization

class Clock extends React.component {
  constructor(props) {
    super(props)
    
    this.state = {this.date: new Date()}
  }
}

1. Clock: 자식 컴포넌트
2. React.component: 부모 컴포넌트
3. extends: 자식이 부모 속성을 상속받도록 하는 키워드

1-1. Constructor

1. 컴포넌트가 생성될때 실행되는 함수

1-2. super()

1. 부모 컴포넌트 React.component의 constructor함수를 호출하여 자식 컴포넌트가 부모 컴포넌트의 속성들을 갖게 하는 함수

1-3. this.state

1. 컴포넌트의 상태를 초기화할 때 사용하는 객체

initialization 단계는 간단히 표현하면, constructor() 함수가 실행되어 props 와 state를 초기화하는 단계라고 볼 수 있다.

2. Mounting

버려진 componentWillMount()

componentWillMount() {
  // do something..
}

React 16.3 부터 componentWillMount() 함수가 depcrecated되었다고 한다.
그 이유는 componentWillMount() 함수의 오용이 잦아서라고 한다.
이를 이해하기 위해 우선 componentWillMount()가 뭔지 이해해보자.
componentWillMount()는 라이프사이클 메서드중 하나이다.
render가 발생하기 직전에 실행되는 메서드다.

오용되는 케이스를 살펴보자.

componentWillMount() {
	fetch(url)
  		.then(res => res.json())
  		.then(data => setData(data))
  		.catch(err => console.log(err));
}

fetch api를 사용하여 데이터를 받아온 후 렌더링때 그 데이터를 뿌려주려한다.
여기서 만약 라이프사이클에 대한 이해가 부족하다면, render()는 componentWillMount() 이후에 실행되므로 setData(data)를 통해 데이터가 렌더링시에 반영된다고 생각할 수 있다.

하지만 리액트에서 상태 업데이트가 화면에 반영되는 것은 render가 일어난 후에 상태 업데이트시 다시 리렌더링이 일어나서 반영되는 것이므로 render가 일어나기 전에 호출된 componentWillMount() 안의 setState 함수는 리렌더링을 통한 상태 업데이트의 화면 반영에 아무 관련이 없다.

렌더링 -> 상태 업데이트 -> 리렌더링

리액트 공식 문서 관련 부분 링크

https://reactjs.org/docs/react-component.html#unsafe_componentwillmount