5. React 컴포넌트 라이프사이클 이벤트

5. React 컴포넌트 라이프사이클 이벤트

컴포넌트의 세밀한 조정을 위해 사용

5.1 React 컴포넌트 라이프사이클 이벤트 한눈에 살펴보기

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

모든 React 컴포넌트는 라이프사이클 이벤트가 있다.

• 마운팅(mounting) 이벤트 : React 엘리먼트(컴포넌트 클래스의 인스턴스)를 DOM 노드에 추가할 때 발생
• 갱신(updating) 이벤트 : 속성이나 상태가 변경되어 React 엘리먼트를 갱신할 때 발생
• 언마운팅(unmounting) 이벤트 : React 엘리먼트를 DOM에서 제거할 때 발생

5.2 이벤트 분류

• 마운팅 : React가 이벤트를 한 번만 실행한다.
• 갱신 : React가 이벤트를 여러 번 실행한다.
• 언마운팅 : React가 이벤트를 한 번만 실행한다.

[ 라이프 사이클 ]

• constructor() : 엘리먼트를 생성하여 기본 속성과 상태를 설정할 때 실행
• 마운팅
  • componentWillMount() : DOM에 삽입하기 전에 실행
  • componentDidMount() : DOM에 삽입되어 렌더링이 완료된 후 실행
• 갱신
  • componentWillReceiveProps(nextProps) : 컴포넌트가 속성을 받기 직전에 실행
  • shouldComponentUpdate(nextProps, nextState) : 컴포넌트가 갱신되는 조건을 정의해서 재렌더링을 최적화. 불 값을 반환
  • componentWillUpdate(nextProps, nextState) : 컴포넌트가 갱신되기 직전에 실행
  • componentDidUpdate(prevprops, prevState) : 컴포넌트가 갱신된 후에 실행
• 언마운팅
  • componentWillUnmount() : 컴포넌트를 DOM에서 제거하기 전에 실행되며, 구독한 이벤트를 제거하거나 다른 정리 작업을 수행

마운팅	컴포넌트 속성 갱신	컴포넌트 상태 갱신	forceupdate()를 이용한 갱신	언마운팅
constructor()	''	''	''	''
componentWillMount()	''	''	''	''
''	componentWillReceiveProps()	''	''	''
''	shouldComponentUpdate()	shouldComponentUpdate()	''	''
''	componentWillUpdate()	componentWillUpdate()	componentWillUpdate()	''
render()	render()	render()	render()	''
''	componentDidUpdate()	componentDidUpdate	componentDidUpdate	''
componentDidMount()	''	''	''	''
''	''	''	''	componentDidMount()

this.forceUpdate()를 호출하는 경우 컴포넌트 재렌더링 ; 메서드 갱신을 강제

5.3 이벤트 구현

ex) DOM

 class Content extends React.Component {
    componentWillMount() {
        console.log(ReactDOM.findDOMnode(this))
    }
    componentDidMount() {
        console.dir(ReactDOM.findDOMNode(this))
    }
    render() {
        return (

        )
    }
}

5.4 모든 이벤트 실행하기

ex) Logger 컴포넌트를 이용한 이벤트 관찰

 class logger extends React.Component {
    constructor(props) {
        super(props)
        console.log('constructor')
    }
    componentWillmount() {
        console.log('componentWillMount 실행')
    }
    componentDidMount(e) {
        console.log('componentDidMount 실행')
        console.log('DOM node : ', ReactDOM.findDOMNode(this))
    }
    componentWillReceiveProps(newProps) {
        console.log('componentWillReceiveProps 실행')
        console.log('새로운 속성 : ', newProps)
    }
    shouldComponentUpdate(newProps, newState) {
        console.log('shouldComponentUpdate 실행')
        console.log('새로운 속성: ', newprops)
        console.log('새로운 상태: ', newState)
        return true
    }
    componentWillUpdate(newProps, newState) {
        console.log('componentWillupdate 실행')
        console.log('새로운 속성: ', newProps)
        console.log('새로운 상태: ', newState)
    }
    componentDidUpdate(oldProps, oldState) {
        console.log('componentDidUpdate 실행')
        console.log('이전 속성: ', oldProps)
        console.log('이전 상태; ', oldState)
    }
    componentWillUnmount() {
        console.log('componentWillUnmount')
    }
    render() {
        return(
            <div>{this.props.time}</div>
        )
    }
}

5.5 마운팅 이벤트

실제 DOM에 컴포넌트 추가에 대한 이벤트

5.5.1 componentWillMount()

단 한번만 실행 (렌더링 직전)

setState() 실행 가능하며, render()에서 상태 변경에 따른 추가적 렌더링을 하징 않음.

5.5.2 componentDidMount()

초기 렌더링을 마친 후에 실행 (브라우저에서만 한 번 실행, 서버 렌더링에선 실행 X)

XHR 요청처럼 브라우저에서만 실행해야 하는 코드를 구현할 때 편리

5.6 갱신 이벤트

컴포넌트 갱신

5.6.1 componentWillReceiveProps(newProps)

새로운 속성을 전달받을 때 실행 (속성의 전환)

새로운 속성을 인자로 받음. 컴포넌트를 최초로 렌더링할 때는 실행되지 않음.

새로운 속성에 따라 상태를 변경하려는 경우에 유용

5.6.2 shouldComponentUpdate()

렌더링 직전에 실행

초기 렌더링 시점이나 forceUpdate() 호출 시에는 실행되지 않음.

false를 반환하면 다시 렌더링 되지 않음.

5.6.3 componentWillUpdate()

새로운 속성이나 상태를 받은 후 렌더링 직전에 호출

초기 렌더링 시에는 호출되지 않음.

갱신 전 필요한 준비 작업을 처리할 때 사용

this.setState() 를 피하는 것이 좋음!

5.6.4 componentDidUpdate()

컴포넌트의 갱신 결과가 실제 DOM에 반영된 직후에 실행

이 메서드 역시 초기 렌더링 시에 호출되지 않음.

5.7 언마운팅 이벤트

DOM에서 요소를 분리하거나 제거

5.7.1 componentWillUnmount()

DOM에서 컴포넌트가 제거되기 직전에 호출

componentDidCatch()

React16 부터 소개된 새로운 라이프사이클 메서드로 오류나 예외 처리를 위해 사용

요약

• componentWillMount()는 서버와 클라이언트에서 모두 실행되는 반면에, componentDidMount()는 클라이언트에서만 실행된다.
• 마운팅 이벤트는 일반적으로 React를 다른 라이브러리와 통합하거나 저장소 또는 서버에서 데이터를 가져올 때 사용된다.
• shouldComponentUpdate()를 사용해서 렌더링을 최적화할 수 있다.
• componentWillReceiveProps()를 사용하면 새로운 속성이 전달될 때 상태를 변경할 수 있다.
• 언마운팅 이벤트는 일반적으로 정리에 사용된다.
• 갱신 이벤트는 새로운 속성이나 상태를 의존하는 로직을 작성할 때 사용되고, 뷰를 갱신하는 시점을 세밀하게 조절할 수 있다.