리액트 라이프사이클 맛만 보기

라이프사이클?

컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지가 라이프 사이클

App.js

import React from "react";
import Lifecycle from './Lifecycle';

function App(){
  const [is_cat, setIsCat] = React.useState(true);
  return(
    <>
    {is_cat? <Lifecycle/> : null}
    <button onClick={() => {setIsCat(!is_cat)}}>WillUnMount해보기</button>
    </>
  );
}

export default App;

Lifecycle.js

// 잊지 말고 import하기
import React from "react";

class Lifecycle extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      cat_name: '나비',
    };

    console.log('in constructor!');
  }

  changeCatName = () => {
      this.setState({cat_name: '바둑이'});

      console.log('고양이 이름을 바꾼다!');
  }

  componentDidMount(){
    console.log('in componentDidMount!');
  }

  componentDidUpdate(prevProps, prevState){
      console.log(prevProps, prevState);
      console.log('in componentDidUpdate!');
  }

  componentWillUnmount(){
      console.log('in componentWillUnmount!');
  }
  render() {

    console.log('in render!');

    return (
      <div>
        <h1>제 고양이 이름은 {this.state.cat_name}입니다.</h1>
        <button onClick={this.changeCatName}>고양이 이름 바꾸기</button>
      </div>
    );
  }
}

export default Lifecycle;

1. constructor()
2. render()
3. componentDidMount()
4. 버튼 클릭

5. changeCatName()
6. render()
7. componentDidUpdate()

업데이트는 사용자의 행동(클릭, 데이터 입력 등)으로 데이터가 바뀌거나,
부모 컴포넌트가 렌더링할 때 업데이트 된다

• props가 바뀔 때
• state가 바뀔 때
• 부모 컴포넌트가 업데이트 되었을 때(=리렌더링했을 때)
• 또는, 강제로 업데이트 했을 경우

만약 컴포넌트에서 렌더링 결과에 전혀 영향을 미치지 않는
변경사항이 발생하게 된다면, 불필요한 렌더링이 발생 하므로 성능 손실이 발생
이럴 때 사용할 수 있는 메소드
shouldComponentUpdate()
컴포넌트 렌더링을 제어할 수 있다

shouldComponentUpdate()는 props 또는 state가 새로운 값으로 갱신되어
렌더링이 발생하기 직전에 호출, 기본값은 true
초기 렌더링 또는 forceUpdate()가 사용될 때에는 호출X

shouldComponentUpdate()가 false를 반환할 경우
UNSAFE_componentWillUpdate(), render(),
그리고 componentDidUpdate()는 호출되지 않는다

하지만
이 메서드는 오직 성능 최적화만을 위한 것
렌더링을 방지하는 목적으로 사용할 경우 버그로 이어질 수 있다
여기서 false를 반환하는 것이
자식 컴포넌트들이 각자가 가진 state의 변화에 따라
다시 렌더링을 수행하는 것을 막는 것은 아니라는 점에 주의

shouldComponentUpdate() 내에서 깊은 동일성 검사를 수행하거나
JSON.stringify()를 사용하는 것을 권하지 않는다
아주 비효율적이며 성능을 떨어트릴 수 있다

결론: 조심해서 사용하자

그렇다면 componentWillUnmount()은 뭘까?

WillUnmount해보기 버튼 클릭

Lifecycle 컴포넌트가 사라졌다

componentWillUnmount()는 컴포넌트가 마운트 해제되어 제거되기 직전에 호출
이 메서드 내에서 타이머 제거, 네트워크 요청 취소,
componentDidMount() 내에서 생성된 구독 해제 등
필요한 모든 정리 작업 수행에 적합

이제 컴포넌트는 다시 렌더링되지 않으므로,
componentWillUnmount() 내에서 setState()를 호출하면 안된다
컴포넌트 인스턴스가 마운트 해제되고 나면, 절대로 다시 마운트되지 않는다

함수형으로 만들어봤다

Lifecycle.js

import React, {useState} from "react";

const Lifecycle2 = ({qwe}) => {
    let [count, setNum] = useState('나비');

    const chanegCatName = () => {
        setNum('말랑');
    }
    return (
        <div>
          <h1>제 고양이 이름은 {count}입니다.</h1>
          <button onClick={chanegCatName}>고양이 이름 바꾸기</button>
        </div>
      );

}

export default Lifecycle2;

클래스형으로는 하나하나 순서를 확인할 수 있어 공부하기 좋았다
하지만 앞으로 익숙해진다면 함수형으로 사용할 것 같다