[React] 컴포넌트, 컴포넌트 생명주기

- 함수 컴포넌트와 클래스 컴포넌트

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

 

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

 

- 컴포넌트 생명주기 메서드

컴포넌트 클래스에서 특별한 메서드를 선언하여 컴포넌트가 마운트되거나 언마운트 될 때 일부 코드 작동

 

---

componentDidMount() 메서드는 컴포넌트 출력물이 DOM에 렌더링 된 후에 실행

  componentDidMount() {
    this.timerID = setInterval(
        () => this.tick(),      
        1000    
    );  
   }

---

Mouting : Dom이생성되고 웹 브라우저상에 나타나는 것

 

React는 컴포넌트를 마운팅할 때 순서대로 4가지 내장 메소드를 호출하게 된다. render() 메소드는 항상 호출 되어야하고, 다른 메소드들은 선택적 으로 호출

1. constructor()
2. getDerivedStateFromProps()
3. render()
4. componentDidMount()

1. constructor(props) : 컴포넌트를 새로 만들 때마다 먼저 호출되는 클래스 생성자 메소드

constructor() 메소드는 props 라고도 불리며, super(props) 를 가장 먼저 호출해야 한다. state 와 다른 초기 값들을 세팅한다. super(props) 는 부모의 constructor 메소드를 초기화하고, 부모로부터 상속받은 메소드들을 컴포넌트로 하여금 사용할 수 있도록 해준다.

 

2. getDerivedStateFromProps

: props 에 있는 값을 state 에 넣을 때 사용하는 메소드

컴포넌트 마운트 또는 업데이트에서 render 메소드를 호출하기 전에 호출되며 시간의 흐름에 따라 변하는 props를 state에 동기화하기 위해 존재하는 메소드

DOM에서 요소들이 랜더링 되기 직전에 호출되며, 최초의 props 에 기반한 state 객체를 저장한다. state 를 인자로 받고, state 가 변하면 객체를 반환한다. static과 함께 선언되어야 하며 메소드 내부에서는 this를 통한 인스턴스 접근이 불가하다. 또한, props를 이용하여 생성한 객체를 반환함으로써 props를 state에 동기화한다.

❌ React에서 이 메소드를 권장하지 않음!

 

3. render : 필수값이며, DOM에 HTML을 표현함.
jsx를 반환 (배열, null 등 다른 요소 반환 가능)

컴포넌트 마운트 또는 업데이트에서 호출되며, shouldComponentUpdate() 가 false를 반환하는 경우에 호출되지 않는다.

UI 렌더링을 위해 필요한 메소드로 React Element를 반환한다. 컴포넌트의 상태를 변경하지 않아야 하며, 호출될 때마다 동일한 결과를 반환해야 하고 브라우저와 직접적인 상호작용을 하지 않아야 한다.

 

4. componentDidMount: 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메소드

라이브러리 또는 프레임워크 함수 호출, 이벤트 등록, setTimeout, setInterval, 네트워크 요청 등의 비동기 작업을 처리하기에 적절한 메소드.

setState()를 호출하는 경우도 있지만, 추가 렌더링이 발생하여 성능 저하로 이루어질 수 있으므로 주의해야 함. (+ 무한루프)

---

componentWillUnmount() : 컴포넌트가 DOM을 제거하거나 DOM 상에서 완전히 제거(Unmount)될 때

- 컴포넌트가 언마운트되기 직전에 호출. 즉, 컴포넌트가 사라지기 전에 마지막으로 작업할 수 있는 메소드

- componentDidMount()에서 설정한 모든 비동기 작업(이벤트, 타이머, 직접 생성한 DOM)에 대하여 정리를 해주어야 한다. 또한, 해당 컴포넌트는 리렌더링 되지 않으므로 setState를 호출하면 안 됌

 

• 라이프 사이클 이벤트 실행 순서 : constructor()를 포함한 라이프 사이클 실행 순서
  1. constructor() : 엘리먼트를 생성하여 기본 state와 prop을 설정할 때 실행된다.
  2. componentWillMount() : 컴포넌트를 DOM에 삽입하기 전 실행
  3. render()
  4. componentDidMount() : DOM에 삽입되어 렌더링이 완료된 후 실행
  5. componentWillReceiveProps(nextProps) : 컴포넌트가 props를 받기 직전 실행
  6. shouldComponentUpdate(nextProps, nextState) : 컴포넌트가 갱신되기 전 실행. 랜더링 유무 설정 가능
  7. componentWillUpdate(nextProps, nextState) : 컴포넌트가 갱신되기 직전 실행
  8. render()
  9. componentDidUpdate(prevProps, prevState) : 컴포넌트가 갱신된 후에 실행
  10. componentWillUnmount() : 컴포넌트를 DOM에서 제거하기 전 실행
• React는 엘리먼트를 먼저 렌더링(= render()함수 호출)하고 나서 DOM에 추가한다.

import React from "react";

class LifeCycle extends React.Component {
    constructor(props) {
        super(props)
    }

// 랜더링 전
    componentWillMount () {
//  this.setState() 사용 가능
    }

// 랜더링render() {
// this.setState() 사용 불가// 랜더링 과정 중에 상태에 대해서 수정은 불가하다// 비동기 작업이기 때문에 결과에 대해서 보장 받지 못한다.return(<></>)
    }


// 랜더링 후 업데이트가 필요한 경우 로직 작성
    componentDidMount () {
// this.setState() 사용 가능

    }

// 메모리 누수 방지 초기화
    componentWillUnmount () {
// this.setState()사용 불가// 해당 하는 객체가 더이상 필요 없어 삭제 되는 과정이기 때문
    }
}

export default App;