[React] 라이프 사이클 메서드

라이프 사이클
: 리액트의 컴포넌트에는 라이프 사이클(생명 주기)가 존재한다.

 

리액트의 컴포넌트에는 생명 주기가 존재하는데,

이는 페이지에 렌더링 되기 전인 준비 과정에서 시작해 페이지에서 사라질 때 끝이 나는 형태로 되어 있다.

 

메서드는 총 9개로 작업을 작동하기 전 실행되는 Will 접두사가 붙은 메서드/어떤 작업을 작동한 후 실행되는 Did 접두사가 존재하며

아래와 같은 카테고리로 나눌 수 있다.

컴포넌트 라이프 사이클

---

 

마운트

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

: 아래의 4개 메서드는 컴포넌트에만 존재하는 메서드

 

호출하는 메서드

1. constructor

: 클래스 생성자 메서드, 컴포넌트 생성자 메서드

: 컴포넌트가 생성되면 가장 먼저 실행되는 메서드로 컴포넌트를 새로 만들 때마다 호출되는 메서드

: 렌더링과 관련된 특정 메모리와 관련된 특정 영역에 선언된 메서드

constructor(props){
    super(props);
    this.state = {} // (1)
    // this.state={param1:props.data} // (2)
    console.log("constructor")
}

(1) this.state = {}

: 여러개의 변수 선언 가능

: 생성자에서 생성한 변수로 변동해서 사용

: (2) 객체 안에 선언한 변수만 태그랑 연동이 가능

---

2. getDerivedStateFromProps

: props의 값을 state에 넣을 때 사용되는 메서드 (즉, props로부터 파생된 state를 가져오는 것)

: state에 넣어서 사용해도 되기 때문에 굳이 선언할 필요는 없음

static getDerivedStateFromProps(props, state){
    console.log("getDerivedStateFromProps");
    return {test:"TEST"};
    // return {param1:props.data, param2:"TEST"}; // 여러개 선언 가능
}

---

3. render

: UI(컴포넌트)를 렌더링하는 메서드

: 껍데기의 UI만 그린 상태에서 데이터를 가져온 후 다시 그리는 경우 사용함

render(){
    console.log("render")
    return(
        <h2>[THIS IS IMPORTED COMPONENT] </h2>
    )
}

---

4. componentDidMount

: 컴포넌트가 웹 브라우저 상에 나타난 후 호출하는 메서드(컴포넌트가 마운트 됨)

: render가 실행된 다음 호출되는 메서드

: DOM을 사용해야 하는 외부 라이브러리를 연동하며, 해당 컴포넌트에서 필요로 하는 데이터를 호출

componentDidMount(){
   console.log("componentDidMount" + this.state.test);
}

 

---

업데이트

: 아래 4가지 경우에 업데이트를 진행함

 

1) props가 바뀔 때

2) state가 바뀔 때

3) 부모 컴포넌트가 리렌더링 될 때

4) this.forceUpdate로 강제 렌더링을 트리거할 때

 

업데이트할 때 호출하는 메서드

1. getDerivedStateFromProps

: 마운트 과정에서도 호출되며, 업데이트가 시작되기 전에도 호출

: props 값의 변화에 따라 state 값에 변화를 주고 싶을 때 사용

static getDerivedStateFromProps(props, state){
    console.log("getDerivedStateFromProps");
    return {test:"TEST"};
}

---

2. shouldComponentUpdate

: 컴포넌트가 리렌더링을 할지 말지를 결정하는 메서드

: 반환하는 값은 true/false 값을 반환

: this.forceUpdate() 함수가 호출되면 생략되고 render 함수를 호출

shouldComponentUpdate(props, state){
    console.log("shouldCompoenentUpdate");
    return true;
}

---

3. render

: 컴포넌트를 리렌더링

: 위 마운트 설명 참고

---

4. getSnapshotBeforeUpdate

: 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출

---

5. componentDidUpdate

: 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드

: 리렌더링이 되어야 하는 것이 업데이트 되면 호출되며 호출되지 않을 수 있음

 

---

언마운트

: 마운트의 반대 과정

: 컴포넌트를 DOM에서 제거하는 것

 

1. componentWillUnmount

: 컴포넌트가 웹 브라우저 상에서 사라지기 전에 호출하는 메서드