[React 교과서] 5장 React 컴포넌트 라이프사이클 이벤트

리엑트 교과서를 정리한 내용입니다.

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

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

• 마운팅 이벤트 : React엘리먼트를 DOM 노드에 추가할때 발생
• 갱신 이벤트 : 속성이나 상태가 변경되어 React엘리먼트를 갱신할 때 발생
• 언마운팅이벤트 : React엘리먼트를 DOM에서 제거할때 발생

5.2 이벤트 분류

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

아래 순서로 라이플 사이클이 실행된다

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

• 라이플사이클 이벤트와 속성 및 상태의 상관관계

5.3 이벤트 구현

라이프사이클 이벤트를 구현하려면 클래스에 메서드를 정의해야함.
ex) componentDidMouht()를 정의하면 컴포넌트 클래스의 엘리먼트가 DOM에 추가되었을때 이 메서드 호출하고 마운팅으로 분류 되어있으므로 컴포넌트 클래스의 인스턴스마다 한번만 호출됨.

1
2
3
4
5
6
7
8
9
10
11
12

class Content extends React.Component {
    componentWillMount(){
        console.log(ReactDOM.findDOMNode(this)) // DOM 노드가 null
    }
    componentDidMount(){
        console.dir(ReactDOM.findDOMNode(this)) // DOM 노드가 <div>
    }
    render(){
        return()
    }
}

• DOM은 늘 대문자로 쓴다.

5.4 모든 이벤트 실행하기

• Logger컴포넌트의 렌더링과 세번의 갱신 실행 코드

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

  class Content extends React.Component { constructor(props) { super(props) this.launchClock() this.state = { counter: 0, currentTime: (new Date()).toLocaleString() } } launchClock() { setInterval(()=>{ this.setState({ counter: ++this.state.counter, currentTime: (new Date()).toLocaleString() }) }, 1000) } render() { if (this.state.counter > 2) return <div/> return <Logger time={this.state.currentTime}></Logger> } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

class Logger extends React.Component {
  constructor(props) {
    super(props)
    console.log('constructor')
  }
  componentWillMount() {
    console.log('componentWillMount is triggered')
  }
  componentDidMount(e) {
    console.log('componentDidMount is triggered')
    console.log('DOM node: ', ReactDOM.findDOMNode(this))
  }
  componentWillReceiveProps(newProps) {
    console.log('componentWillReceiveProps is triggered')
    console.log('new props: ', newProps)
  }
  shouldComponentUpdate(newProps, newState) {
    console.log('shouldComponentUpdate is triggered')
    console.log('new props: ', newProps)
    console.log('new state: ', newState)
    return true
  }
  componentWillUpdate(newProps, newState) {
    console.log('componentWillUpdate is triggered')
    console.log('new props: ', newProps)
    console.log('new state: ', newState)
  }
  componentDidUpdate(oldProps, oldState) {
    console.log('componentDidUpdate is triggered')
    console.log('old props: ', oldProps)
    console.log('old state: ', oldState)
  }
  componentWillUnmount() {
    console.log('componentWillUnmount')
  }
  render() {
    console.log('rendering... Display')
    return (
      <div>{this.props.time}</div>
    )
  }
}

5.5 마운팅 이벤트

마운팅 이벤트 유형은 실제 DOM에 컴포넌트를 추가하는 것에 대한 이벤트다.

• componentWillMount(): React엘리먼트가 실제 DOM에 곧 추가 될 것을 알림
• componentDidMount(): React엘리먼트를 실제 DOM에 추가한 시전으로, 이 시점의 React엘리먼트는 DOM노드임.
  *constructor()는 componentWillMount()보다 먼저 실행됨.

5.5.1 componentWillMount()

초기 렌더링 직전에 실행됨. 브라우저와 프론트엔드에서 이루어짐.
서버 렌더링 과정에서도 componentWillMount()는 실행됨.

5.5.2 componentDidMount()

초기렌더링 마친 후 실행됨. 브라우저에서 한번 실행되고 서버렌더링에서는 실행 안 됨.
자식엘리먼트를 참조로 접근할 수 있음. 자식 컴포넌트의 componentDidMount()는 부모 컴포넌트의 componentDidMount()보다 먼저 호출됨

componentDidMount() 이벤트는 다른 라이브러리를 통합하기 가장 적절한 위치임.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

class Users extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      users: [] // 이렇게 초기화 해놔야 render()에서 해당 상태가 존재하는지 안 하는지 신경 안쓸 수 있음
    }
  }
  componentDidMount() {
    fetch(this.props['data-url'])
      .then((response)=>response.json())
      .then((users)=>this.setState({users: users}))
  }
  render() {
    return <div className="container">
      <h1>List of Users</h1>
      <table className="table-striped table-condensed table table-bordered table-hover">
        <tbody>{this.state.users.map((user)=>
          <tr key={user.id}>
            <td>{user.first_name} {user.last_name}</td>
            <td> {user.email}</td>
            <td> {user.ip_address}</td>
          </tr>)}
        </tbody>
      </table>
    </div>
  }
}

XHR 요청을 위한 코드를 componentDidMount()에 사용하는 것이 좋음

5.6 갱신 이벤트

마운팅 이벤트는 React를 다른 프레임워크나 라이브러리 데이터 저장소와 연결하는데 사용하곤 함.
갱신 이벤트는 컴포넌트를 갱신하는것과 관련됨.

1. componentWillRecivierProps(newProps)
2. shouldComponentUpdate()
3. componentWillIpdate()
4. componentDidUpdate()

5.7 언마운팅 이벤트

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

5.7.1 componentWillUnmount()

DOM에서 컴포넌트가 제거되기 직전 호출.
ex)타이머 제거하거나 DOM요소 정리하거나, componentDidMount()에서 연결한 이벤트 제거 등.