리액트 라이프사이클 방식 | 16일차

뭐

React의 모든 구성 요소에는 3가지 주요 단계 동안 모니터링하거나 업데이트할 수 있는 수명 주기가 있습니다.

따라서 모든 구성 요소는 수명 동안 3개의 주요 단계를 갖습니다.

1.) 마운팅 → 컴포넌트를 DOM에 추가하는 것을 의미합니다.

2.) 업데이트 중 → 구성 요소의 상태 또는 기타 데이터 업데이트.

3.) 마운트 해제 → DOM에서 컴포넌트 제거.

어떻게

Mounting
Component가 DOM에서 처음으로 렌더링되면 Mounting이라고 합니다.

React에는 Mounting 중에 호출된 3가지 메서드가 있습니다.

1.) 생성자()

2.) 렌더링()

3.) 컴포넌트DidMount()

더 나아가기 전에 접두사가 will인 메서드를 rightbefore Something happen라고 하고 접두사가 Did인 메서드를 rightafter Something happen라고 합니다.



생성자는 1st를 호출하고 상태를 초기화하고 이벤트 핸들러를 바인딩하는 데 사용됩니다.

그 후 render가 호출됩니다.



구성 요소가 렌더링된 후 React는 ComponentDidMount() 를 호출합니다.

구성 요소가 이미 렌더링되었으므로 componenetDidMount()에서 상태를 변경하려고 하면 Re-rendering가 발생합니다.

이 예를 살펴보겠습니다.

import React,{Component} from "react"

class ReactLifestyle extends Component{
  constructor(props){
    super(props);
    this.state = {count:1}
    console.log('In Constructor Method')
  }
  componentDidMount(){
    console.log('IN Component Did Mount')
    this.setState({count:2})
  }
  render(){
    console.log('In Render method')
    return(
      <div>
      hi
      </div>
    )
    }
}

export default ReactLifestyle;

코드의 출력은 👇입니다.



보시다시피 1stConstructor Method는 thenRender Method, thenComponent Did Mount입니다.

또한 ComponentDidMount에서 상태를 설정하려고 하면 출력에서 ​​u가 할 수 있는 것처럼 다시 렌더링됩니다.

componentDidMount

Ajax를 통해 데이터 로드

import React, { Component } from 'react';
import axios from 'axios';
import "./Zenquote.css"

class Zenquote extends Component {
    constructor(props) {
        super(props);
        this.state = {quote:"",isloading:true};  
    }
    componentDidMount() {
        //WE are adding the setTimeout so can we can get in a Condition when after rendering the Data Fetching takes time.
        setTimeout(() =>{
        axios.get("https://api.github.com/zen")
        .then((res)=>{
            console.log(res.data);
            this.setState({quote:res.data,isloading:false});
        })
        .catch((err)=>{
            console.log(err);
        })
    },1000)

    }
  render() {
    return( <div>
        {this.state.isloading? 
        (<p className="circle">
        Loading .........
        </p>)
        : (<div>
            <h3>Always Remember ....</h3>
            <p>{this.state.quote}</p>
        </div>)}

    </div>);
  }
}

export default Zenquote

따라서 코드에서 페이지를 새로 고칠 때마다 새 항목quote을 얻었고 axios를 사용하여 데이터를 가져오고 setTimeout을 사용하여 때때로 데이터 가져오기에 시간이 걸린다는 것을 설명해야 합니다. animated Loader를 추가할 수 있는 시간입니다.

Async 기능을 사용하여 데이터 불러오기 →

Async/await 약속을 더 쉽게 작성할 수 있습니다.
Async 함수가 Promise를 반환하도록 합니다.
Await 함수가 약속을 기다리도록 합니다.

componentDidmount(){
    async GetData(){
        let res = await fetch('http://github.com.api/users');
        console.log(res);
    }
}

쓰기를 하면 데이터가 올 때까지 기다린 다음 다른 줄로 이동합니다.

예 →

import React, { Component } from 'react';
import axios from 'axios';

class GithubUsersInfo extends Component {
    constructor(props) {
        super(props);
        this.state = {imgUrl:"",name:"",followers:""};
    }
    async componentDidMount() {
        let user = `https://api.github.com/users/${this.props.user}`
        const res = await axios.get(user)
        console.log(res);
        this.setState({imgUrl :res.data.avatar_url,name:res.data.name,followers:res.data.followers})
    }
  render() {
    return <div>
        <h2>Github User Name : {this.state.name}</h2>
        <img src={this.state.imgUrl} alt="image"/>
        <p>Followers : {this.state.followers}</p>
    </div>;
  }
}

export default GithubUsersInfo

사용자 이름을 소품으로 사용합니다.

이렇게 하면 Github 사용자 데이터가 제공됩니다.

ComponentDidUpdate →

업데이트는 State , Props(상위 측에서 변경됨) 또는 기타 외부 데이터를 변경하여 수행할 수 있습니다.

Like forceUpdate는 상태에 있지 않은 항목을 업데이트하는 데 사용되며 종종 외부 데이터이므로 forcedata()를 사용할 수 있도록 변경합니다.



Something Re-rendering Happen을 업데이트하면 ComponentDidUpdate()가 호출됩니다.

따라서 ComponentDidUpdate()를 사용하여 모든 데이터를 변경된 데이터베이스에 저장할 수 있습니다.

예 →

import React, { Component } from 'react';
import axios from 'axios';
import "./Zenquote.css"

class Zenquote extends Component {
    constructor(props) {
        console.log("In Constructor")

        super(props);
        this.state = {quote:"",isloading:true};  
    }
    componentDidMount() {
        console.log("In Component Did Mount")
        setTimeout(() =>{
        axios.get("https://api.github.com/zen")
        .then((res)=>{
            this.setState({quote:res.data,isloading:false});
        })
        .catch((err)=>{
            console.log(err);
        })
    },1000)

    }
    componentDidUpdate(){
        console.log("In Component Did Update")
    }
  render() {
      console.log("Rendering .....")
    return( <div>
        {this.state.isloading? 
        (<p className="circle">
        Loading .........
        </p>)
        : (<div>
            <h3>Always Remember ....</h3>
            <p>{this.state.quote}</p>
        </div>)}

    </div>);
  }
}

export default Zenquote

아래 코드의 출력은 다음과 같습니다.



먼저 Constructor가 호출되고 렌더링이 발생한 다음 ComponentDidMount가 호출되고 ComponentDidMount에서 State를 변경하므로 Re-rendering이 발생하고 Re-rendering 후 상태를 변경하면 ComponentDidUpdate Got가 호출됩니다.

무언가를 업데이트할 때마다 ComponentDidUpdate가 재렌더링 후에 호출됩니다. 따라서 Component Did Mount를 사용하여 데이터를 데이터베이스에 저장할 수 있습니다.

또한 Component Did Update에서 이전 상태 및 이전 소품에 액세스할 수 있으므로 U는 이를 사용하여 상태 또는 소품을 이전 것과 비교할 수 있습니다.

이전 상태와 소품 u를 사용하려면 다음과 같이 작성해야 합니다.

componentDidUpdate(prevProps,prevState){
    // Inside this u can use the previous props & the state 
    console.log(prevProps);
    console.log(this.props);
}

첫 번째 인수는 이전 소품이고 두 번째 인수는 이전 상태입니다.

ComponentWillUnmount()

DOM에서 무언가를 제거할 때 호출됩니다.

componenetWillUnmount(){
    console.log('In Component Will Unmount')
    //It will be called before the removal of the Component.
}

행복한 코딩 🙂