라이프사이클(클래스형 vs 함수형), React hooks

생명주기(LifeCycle)

컴포넌트 중심 라이브러리의 집합체라고 보면 된다. 모든 컴포넌트는 여러 종류의 “생명주기 메서드”를 가지며, 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할 수 있다.

모든 컴포넌트에는 각각의 생명주기가 존재하고 각 생명주기에 맞는 메서드들이 있다.

• 구성요소는 화면에 추가될 때 마운트(컴포넌트 생성 될 때)된다 . 
• 구성 요소는 일반적으로 상호 작용에 대한 응답으로 새 속성 또는 상태를 수신할 때 업데이트(컴포넌트가 갱신될 때, 리렌더링)된다 .
• 구성 요소는 화면에서 제거될 때 마운트(컴포넌트가 DOM에서 제거되는 시점) 해제된다 .

자주 사용되는 생명주기 메서드

render()

클래스 컴포넌트에서 반드시 구현돼야하는 유일한 메서드이다. 이 메서드가 호출되면 this.props와 this.state의 값을 활용하여 아래의 것 중 하나를 반환해야 한다.

constructor()

메서드를 바인딩하거나 state를 초기화하는 작업이 없다면, 해당 React 컴포넌트에는 생성자를 구현하지 않아도 된다. React 컴포넌트의 생성자는 해당 컴포넌트가 마운트되기 전에 호출된다. React.Component를 상속한 컴포넌트의 생성자를 구현할 때에는 다른 구문에 앞서 super(props)를 호출해야 한다. 그렇지 않으면 this.props가 생성자 내에서 정의되지 않아 버그로 이어질 수 있다.

componentDidMount()

componentDidMount()는 컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출된다. DOM 노드가 있어야 하는 초기화 작업은 이 메서드에서 이루어지면 된다. 외부에서 데이터를 불러와야 한다면, 네트워크 요청을 보내기 적절한 위치이다.

이 메서드는 데이터 구독을 설정하기 좋은 위치이며, 데이터 구독이 이루어졌다면, componentWillUnmount()에서 구독 해제 작업을 반드시 수행해야한다.

componentDidUpdate()

componentDidUpdate()는 갱신이 일어난 직후에 호출된다. 이 메서드는 최초 렌더링에서는 호출되지 않는다.

컴포넌트가 갱신되었을 때 DOM을 조작하기 위하여 이 메서드를 활용하면 좋다. 또한, 이전과 현재의 props를 비교하여 네트워크 요청을 보내는 작업도 이 메서드에서 이루어지면 된다

componentWillUnmount()

componentWillUnmount()는 컴포넌트가 마운트 해제되어 제거되기 직전에 호출된다. 이 메서드 내에서 타이머 제거, 네트워크 요청 취소, componentDidMount() 내에서 생성된 구독 해제 등 필요한 모든 정리 작업을 수행한다.

이제 컴포넌트는 다시 렌더링되지 않으므로, componentWillUnmount() 내에서 setState()를 호출하면 안 된다. 컴포넌트 인스턴스가 마운트 해제되고 나면, 절대로 다시 마운트되지 않는다.

---

참고문서 : https://ko.legacy.reactjs.org/docs/react-component.html#render

React.Component – React

시간되면 정독하기!