[리액트인액션]Chapter4. 리액트의 렌더링과 생명주기 메소드

렌더링

---

- 리액트가 데이터를 사용자 인터페이스에 반영하는 과정이며, 생명주기 메소드를 이용해 컴포넌트와 상호작용하는 방법

- 뭔가 되게 하는것, 뭔가를 만드는 것

- 리액트가 사용자 인터페이스를 만들고 관리하는 과정에서 수행하는 작업

- 애플리케이션을 화면에 그려내는 작업

- (리액트 시점) 컴포넌트를 해석해 UI로 탈바꿈 시키는 과정

- 생명주기 메소드를 사용하면 이 과정을 가로챌 수 있다.

생명주기 메소드

---

- 클래스 기반 리액트 컴포넌트에 추가된 특별한 메소드

- 컴포넌트 생명주기 내의 특정 시점에 실행된다.

- 생명주기를 가진 컴포넌트는 컴포넌트가 동작을 시작하는 시점, 동작 중인 시점, 완료되는 시점을 표현한다.

- LifeCycle API라고도 한다.

생명주기 메소드의 종류

- 초기화 메소드

- Will 메소드 : 특정 작업이 실행되기 직전에 호출

- Did 메소드 : 특정 작업이 실행된 직후에 호출

생명주기의 분류

---

초기화

- 컴포넌트 클래스의 인스턴스가 생성되는 시점

마운팅

- 리액트가 컴포넌트를 DOM에 삽입하는 과정

- 컴포넌트는 리액트가 실제 DOM에 추가하기 전에는 오로지 가상 DOM에만 존재한다.

- 마운팅 메소드를 사용하면 컴포넌트의 수명이 시작되는 시점과 끝나는 시점을 가로챌 수 있다.

  - 컴포넌트의 수명 시작과 끝은 한 번만 존재하기 때문에, 마운팅 생명주기 메소드들도 한번만 호출된다.

- 리액트가 컴포넌트를 실제 DOM에 삽입하는 과정

- 마운팅이 완료되면 컴포넌트가 동작할 준비가 된다.

갱신

- 컴포넌트가 상태나 속성으로 전달된 새 데이터에 의해 갱신되는 시점

언마운팅

- 컴포넌트가 DOM에서 제거되는 시점

- 컴포넌트가 제거될 때 필요한 정리 작업 등을 언마운팅 생명주기 메소드에서 수행

생명주기 분류에 따른 생명주기 메소드

---

마운팅

[초기화]

defaultProps()

- 컴포넌트의 기본 속성값을 제공하기 위한 정적인 속성

- 부모 컴포넌트가 속성을제공하지 않은 경우 this.props에 기본적으로 설정된다.

- 정적 속성(static)이므로 인스턴스가 아닌 클래스에서 접근한다.[Will]

[Will]

componentWillMount()

- 컴포넌트가 마운트 되기 전에 상태를 결정하거나 다른 동작을 수행할 기회를 제공

componentWillMount() {

//컴포넌트가 화면에 출력되기 전에 호출되는 메소드

}

[Did]

componentDidMount()

- 컴포넌트가 마운트 된 후에 호출되는 메소드

- 네트워크 요청의 응답으로 전달받은 데이터를 이용해 컴포넌트 상태를 갱신하는 작업 등을 수행하기에 적절한 시점

componentDidMount() {

// 외부 라이브러리 연동: D3, masonry, etc

// 컴포넌트에서 필요한 데이터 요청: Ajax, GraphQL, etc

// DOM 에 관련된 작업: 스크롤 설정, 크기 읽어오기 등

}

갱신

- 컴포넌트의 업데이트는 props의 변화, state의 변화에 따라 결정된다.

[초기화]

shouldComponentUpdate()

-갱신을 수행할 것인지 여부를 결정할 수 있다.

-false를 반환하면 다음에 상태가 변경될 때까지 render(), componentWillUpdate(), componentDidUpdate() 메소드는 호출되지 않는다.

-즉, 컴포넌트가 불필요하게 갱신되는 상황을 방지할 수 있다. (쓸데없이 낭비되는 CPU처리량을 줄여줄 수 있다.)

shouldComponentUpdate(nextProps, nextState) {

// return false 하면 업데이트를 안함

return true;    // 기본값

}

[Will]

componentWillReceiveProps()

- 컴포넌트가 새로운 props를 받게 되었을 때 호출된다.

- 이 안에선느 주로 state가 props에 따라 변해야하는 로직을 작성한다.

- 새로 받게될 props는 nextProps로 조회할 수 있으며, 이 때 this.props를 조회하면 업데이트 되기 전의 값이 조회된다.

componentWillReceiveProps(nextProps) {

// this.props 는 아직 바뀌지 않은 상태

}

componentWillUpdate()

- 컴포넌트가 업데이트 되기 전에 호출되는 메소드

- 주로 애니메이션 효과를 초기화하거나, 이벤트 리스너를 없애는 작업을 한다.

- 이 메소드가 호출된 이후에는 render() 메소드가 호출된다.

componentWillUpdate(nextProps, nextState) {

}

[Did]

componentDidUpdate()

- 컴포넌트가 업데이트 된 후에 호출되는 메소드

- 컴포넌트 업데이트 후 render() 메소드가 실행된 이후에 실행된다.

- 이 시점에서는 this.props, this.state 값이 변경되어 있다.

- 파라미터를 통해 이전 값인 prevProps, prevState 값을 조회할 수 있다.

componentDidUpdate(prevProps, prevState) {

}

언마운팅

[Will]

componentWillUnmount()

- 컴포넌트가 제거될 때 필요한 정리 작업 등을 언마운팅 생명주기 메소드에서 수행

- 주로 이벤트의 제거나, 외부 라이브러리에 dispose 와 같은 기능이 있다면 이 메소드에서 호출하여 인스턴스를 제거할 수 있다.

componentWillUnmount() {

// 이벤트, setTimeout, 외부 라이브러리 인스턴스 제거

}

에러 처리        //TODO

[Did]

componentDidCatch()

#부록 - 생명주기 메소드 변경 사항 (리액트 버전 16.3 이후)

[변경 대상]

componentWillMount()

componentWillReceiveProps()

componentWillUpdate()

[변경 사유]

- 비동기 렌더링 기능을 구혀하는 동안 3가지 생명주기 메소드가 안전하지 않은 코딩 습관을 유발하며, 이 메소드에 대한 잘못된 이해와 사용 방식이 향후 비동기 렌더링 적용에 문제를 유발할 수 있음.

[변경 내용]

버전 16.3

-변경 대상 메소드 이름에 "UNSAFE_" 접두어를 붙여 사용

버전 16.4 이상

-변경 대상 메소드를 호출할 때 만료될 API임을 알리는 경고가 추가 (브라우저의 콘솔창에 경고 출력)

버전 17.0

-변경 대상 메소드들은 제거되고 "UNSAFE_" 접두어를 붙인 메소드들만 남게 됨.