수명 주기 방법: React 🚀

반응이란 무엇입니까?

React는 웹 개발 분야에서 가장 인기 있는 프론트엔드 JavaScript 라이브러리입니다.
React는 웹 및 모바일 애플리케이션을 위한 빠르고 대화형 사용자 인터페이스를 구축하기 위해 만들어졌습니다.
애플리케이션의 뷰 레이어만을 담당하는 오픈 소스, 컴포넌트 기반, 프론트엔드 라이브러리입니다.
Netflix, Airbnb, Instagram 등과 같은 대기업에서 사용합니다.

React.js는 무엇입니까?

React 또는 ReactJS라고도 하는 React.js는 UI 구성 요소의 계층 구조를 구축하는 JavaScript 라이브러리입니다.
프론트엔드와 서버측 모두를 지원합니다.

리액트 네이티브란?

React Native는 JavaScript를 사용하여 기본 애플리케이션을 빌드하기 위한 프레임워크입니다.
React Native는 네이티브 앱 구성 요소로 컴파일되므로 네이티브 모바일 애플리케이션을 빌드할 수 있습니다.


간단히 말해서 react.js를 사용하여 웹 애플리케이션이나 웹 사이트를 구축할 수 있는 반면 react-native를 사용하여 모바일 애플리케이션만 구축할 수 있습니다.

React 수명 주기 방법이란 무엇입니까?

React의 모든 구성 요소는 이벤트의 수명 주기를 거칩니다.
인간의 구성 요소가 출생, 성장 및 죽음의 사이클을 거치는 것처럼.

장착 – "구성 요소의 탄생"이라고 합니다.
이러한 메서드는 구성 요소의 인스턴스가 만들어지고 DOM에 삽입될 때 다음 순서로 호출됩니다.

생성자()

정적 getDerivedStateFromProps()

렌더링()

componentDidMount()

업데이트 – "구성 요소의 성장"이라고 합니다. 업데이트는 props 또는 state의 변경으로 인해 발생할 수 있습니다. 이러한 메서드는 구성 요소가 다시 렌더링될 때 다음 순서로 호출됩니다.

정적 getDerivedStateFromProps()

shouldComponentUpdate()

렌더링()

getSnapshotBeforeUpdate()

componentDidUpdate()

마운트 해제 – "구성 요소의 죽음"이라고 합니다. 이 메서드는 구성 요소가 DOM에서 제거될 때 호출됩니다.

componentWillUnmount()

설치:

Constructor():

• The constructor for a React component is called before it is mounted.
• When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement.

constructor(props) {
  super(props);
  this.state = { textChange: true };
}

static getDerivedStateFromProps():

• getDerivedStateFromProps is one of those newly introduced lifecycle method replacing componentWillReceiveProps.
• getDerivedStateFromProps is used in some rare cases where state depends on the change of props.
• getDerivedStateFromProps is a static method. So it does not have access to component instance this. It has only updated props and current state object.
• If you need to do anything after state update like fetching data, then you should use componentDidUpdate lifecycle method.

static getDerivedStateFromProps(nextProps, prevState){
   if(nextProps.someValue!==prevState.someValue){
     return { someState: nextProps.someValue};
  }
  else return null;
}

// This is an example of how to fetch external data in response to updated props:
  static getDerivedStateFromProps(nextProps, prevState) {stuff).
    if (nextProps.id !== prevState.prevId) {
      return {
        externalData: null,
        prevId: nextProps.id
      };
    }
    return null;
  }

render():

• React renders HTML to the web page by using a function called ReactDOM.render()
• The ReactDOM.render() function takes two arguments, HTML code and an HTML element.
• The purpose of the function is to display the specified HTML code inside the specified HTML element.

import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div>
          <h1 className="react"> React render()</h1>
      </div>
    );
  }
}
export default App;

componentDidMount():

• componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.
• componentDidMount() method is the perfect place, where we can call the setState() method to change the state of our application and render() the updated data loaded JSX.
• this technique called by React itself to either fetch the data from An External API or perform some unique operations which need the JSX elements.

import React, { Component } from 'react';

class App extends Component {

  constructor(props){
    super(props);
    this.state = {
      data: 'Viraj Nimbalkar'
    }
  }

  getData(){
    setTimeout(() => {
      console.log('Our data is fetched');
      this.setState({
        data: 'Hello Developers!!'
      })
    }, 1000)
  }

  componentDidMount(){
    this.getData();
  }

  render() {
    return(
      <div>
      {this.state.data}
    </div>
    )
  }
}

export default App;

업데이트:

shouldComponentUpdate():

• shouldComponentUpdate() allows your Component to exit the Update life cycle if there is no reason to apply a new render.
• This method only exists as a performance optimization.
• shouldComponentUpdate() is a no-op that returns true. This means every time we start an Update in a Component, we will re-render.

class ListItem extends Component {
    shouldComponentUpdate(nextProps, nextState) {
        return nextProps.isFavourite != this.props.isFavourite;
    }
    ...
}

getSnapshotBeforeUpdate():

• getSnapshotBeforeUpdate(prevProps, prevState) is invoked after render() method but just before DOM is changed.
• That means before virtual DOM is converted to actual DOM ( known as pre-commit phase ), this method is called.

getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

render():

• React renders HTML to the web page by using a function called ReactDOM.render()
• The ReactDOM.render() function takes two arguments, HTML code and an HTML element.
• The purpose of the function is to display the specified HTML code inside the specified HTML element.

import React, { Component } from 'react';
class App extends Component {
  render() {
    return (
      <div>
          <h1 className="react"> React render()</h1>
      </div>
    );
  }
}
export default App;

componentDidUpdate():

• componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.
• componentDidUpdate() takes as its first two arguments the previous props and the previous state.
• Inside the method we can check if a condition is met and perform an action based on it.

componentDidUpdate(prevProps) {
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

마운트 해제:

componentWillUnmount():

• componentWillUnmount is the last function to be called immediately before the component is removed from the DOM.
• componentWillUnmount() is generally used to perform clean-up for any DOM-elements or timers created in componentWillMount

   componentWillUnmount() {
        document.removeEventListener("click", this.closeMenu);
    }