Immersive LifeCycle

🔫 LifeCycle

• 생성될때
  • constructor(생성자함수) 컴퍼넌트가 가장 처음 만들어 질때 호출되는 함수
    this.state 값을 설정, this 바인딩 하는 역할
    
  • getDerivedStateFromProps (현재 상태를 가지고 있는)
  • render 한번 점검?
    render() {
    return
    Hello
    
    }
    
  • componentDidMount (보여줌)
    
• 업데이트 할때
  * getDerivedStateFromProps
  • shouldComponentUpdate (true, false를 이용하여 값이 true면 다음으로넘기고 아니면
    가지고 false로 날려버림니다)
    
  • render
  • getSnapshotBeforeUpdate(브라우저 제출직전에 DOM에 접근가능, 어떤 값을 리턴하게되면
    componentDidUpdate 에서 확인이 가능합니다)

• 제거할때

  	* componentWillUnmount (컴퍼넌트가 사라지기 직전에 호출, 등록된 컴퍼넌트 제거)

🏮 componentDidCatch

에러 발생 찾기
에러가 발생하게 되면 브라우저 상에서는 흰 바탕화면입니다. 그러므로 직관적으로 보여주게 하려고 합니다.

• main.js

import React from "react";
import User from "./User";
import ErrorBoundary from "./ErrorBoundary";
import ReactDOM from "react-dom";

function App() {
  const user = {
    id: 1,
    username: "suyang"
  };
  return (
    <ErrorBoundary>
      <User />
    </ErrorBoundary>
  );
}

export default App;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

• User.js

import React from "react";

function User({ user }) {
  return (
    <div>
      <div>
        <b>ID</b>: {user.id}
      </div>
      <div>
        <b>Username</b>: {user.username}
      </div>
    </div>
  );
}
export default User;

• ErrorBoundary.js

import React, { Component } from "react";

class ErrorBoundary extends Component {
  state = {
    error: false
  };

  componentDidCatch(error, info) {
    console.log("err");
    console.log({
      error,
      info
    });
    this.setState({
      error: true
    });
  }

  render() {
    if (this.state.error) {
      return <h1>에러발생</h1>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;