React Lifecycle #1 (lifecylce설명과 Mount)

서론

React는 라이프사이클(생명주기, Lifecycle) 이벤트를 기반으로 컴포넌트의 동작을 제어하고 사용자 정의를 할 수 있다.

 

이러한 라이프사이클을 이용하여 우리는 React를 사용해,

UI를 화면에 보이게 하고, UI를 업데이트 또는 교체하며, UI를 화면에서 제거할 수 있다.

---

React 라이프사이클 이벤트

라이프사이클 이벤트를 분류해보면 다음과 같다.

 

• 마운트(생성, Mounte) 이벤트: React 엘리먼트를 DOM 노드에 추가할 때 발생한다.
• 업데이트(갱신, Update) 이벤트: 속성이나 상태가 변경되어 React 엘리먼트를 갱신할 때 발생한다.
• 언마운트 (제거, Unmount) 이벤트: React 엘리먼트를 DOM에서 제거할 때 생긴다.

---

마운트(생성, Mounte) 이벤트

컴포넌트 함수가 실행되고 결과물로 나온 Element들이 가성 DOM에 삽입되고 실제 DOM을 업데이트하기까지의 과정이다.

마운트 될 때 발생하는 메서드들은 다음과 같다.

 

• constructor
• getDerivedStateFromProps
• render
• componentDidMount

---

constructor

constructor는 컴포넌트의 생성자 매서드이다. 컴포넌트가 마운트 되기 전에 실행되는 메서드이다.

 

주로 다음과 같은 역할을 한다.

 

• this.state로 state 값을 선언 / 초기화
• 각종 Event 처리 바인딩

constructor를 사용할 때 다음과 같은 점을 주의해야 한다.

 

• constructor를 사용하고자 하는 목적이 없다면 작성하지 않아도 되는 코드이다.
• constuctor를 사용한다면, super(props)를 반드시 호출하여 this.props를 정의해 주어야 한다. (이유)
• 마운트가 되기 전, constuctor 내부에서 setState 등의 업데이트를 실행하지 말자. 필요하다면 state에서 정의하면 된다.

마운트 되기 전, 사용할 state는 constructor에 미리 정해두어야 하고

그렇지 않은 state는 마운트 된 후, setState를 통해서 이루어져야 한다.

---

getDerivedStateFromProps

getDerivedStateFromProps는 컴포넌트가 처음 렌더링 되기 전, 이후 컴포넌트가 리렌더링 되기 전에 매번 실행된다.

props로 받아온 정보를 state에 넣어주고 싶을 때 사용한다.

 

주의할 점으로 setState를 사용하는 것이 아닌, 값을 return해야 한다.

static getDerivedStateFromProps(nextProps, prevState) {
    console.log("getDerivedStateFromProps");
    if (nextProps.color !== prevState.color) {
      return { color: nextProps.color };
    }
    return null;
  }

다른 생명주기 메서드들과는 달리 앞에 static을 필요로 하고, 이 안에서는 this를 조회할 수 있다.
여기서 특정 객체를 반환하게 되면, 해당 객체 안에 있는 내용들이 컴포넌트의 state로 설정된다.
반면 null을 반환하게 되면 아무 일도 발생하지 않습니다.

 

+

componentWillReceiveProps의 대체 역할로 작성된 메서드 이다.

---

render

render()는 최종적으로 component에서 작업한 결과물을 return 한다.
Element를 반환해야 하기 때문에, 컴포넌트라면 반드시 있어야 하는 메서드이다.

return의 결과물로 나올 수 있는 것들은 다음과 같다.

 

• React Element
• 배열과 Fragment(<> </>)
• Boolean or Null -> Null 값이면 아무것도 rendering 하지 않는다.
• String or Number

render()를 작성할 때 주의해야 할 사항은 다음과 같다.

 

1. render() 메서드는 순수(Pure Function) 해야 한다.
   이 의미는 같은 input에 대해서 같은 output이 나와야 한다는 것을 의미한다.
   시점이나 상황에 따라 다른 결과물을 리턴하는 것을 지양해야 한다.
2. render() 메서드 안에서 setState 작업을 하면 안 된다.
   이는 무한 루프에 빠질 것이다.
   render 내부의 setState가 실행되면 업데이트가 되어, 다시 render가 되는데 또다시 setState가 실행되어 이 순환을 반복하게 된다.

---

componentDidMount

componentDidMount()는 컴포넌트의 결과물이 DOM에 mount 된 직후에 실행되는 메서드이다.
주로 ajax 요청을 하거나, DOM의 속성을 읽거나 직접 변경하는 작업을 진행할 때 사용한다.

 

보통 다음과 같은 경우에 사용된다.

 

• DOM 노드를 확인하고 초기화해야 하는 경우.
• 외부의 데이터를 불러오거나 네트워크 요청을 보내야 하는 경우.

componentDidMount()에서 바로 setState를 실행할 경우, 렌더링이 완료되고 다시 업데이트하여, 또다시 rendering을 하게 된다.

하지만, 이 경우에는 브라우저 화면을 갱신하기 전에 실행되어 사용자는 2번 렌더링 되는 과정을 볼 수 없다.
필요한 경우를 제외하면 최초에 실행되는 생성자(constructor)에서 세팅하도록 하자.

---

참고한 글

React Life Cycle 시리즈(Mount 편)

25. LifeCycle Method · GitBook