React - 6 State [setState(), life cycle method]

function component

- 쉽게 말해 함수형태의 컴포넌트이다.

 

function APP(){

 

}

이렇게 정의된 컴포넌트들은 전부 함수형 컴포넌트이다.

return 형태로서 반환하고 스크린에 모양을 넘길수 있다.

Class component

- 클래스 형태의 컴포넌트이다.

- return 형태가 없어도 된다.

class App extends React.Component{
  render(){
    return <h1>I am a class component</h1>
  }
} 

이러한 형태로서 React.Component을 상속받는다.

React.component는 render()함수를 갖고 있기 때문에 APP class도 render 함수를 사용할 수 있다.

 

그리고 render함수가 class안에 있다면 react는 자동적으로 render()함수를 실행시키려고한다.

render 함수는 스크린에 표시를 하는 함수이다.

 

render함수는 항상 재시작 되지 않는다.

예를 들어

class App extends React.Component {
  state = {
    count: 0
  }
  add = () => {
    this.state.count -= 1;
  };

  minus = () => {
    this.state.count -= 1;
  };
  render() {


    return (
      <div>
        <h1>This number is {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    )
  }
}

이런형태에서 

여기서 add버튼을 여러번 눌러도 상태는 변하지 않는다. count는 변하지만 render함수가 재시작되지 않았기 때문이다.

또한

이러한 문구가 뜨는데 객체의 값을 변경할 때는 직접변경하지 말고 getter setter같은 메소드를 쓰라는 이야기이다.

 

이럴때 setState()를 사용한다.

 

setState()

- 이 함수는 state자체를 최신화 해버린다. 매개변수로 state를 대신할 object를 받아버리고 그것을 state에

넣어버린다. 또한 자동적으로 render()함수를 재시작해준다. 따라서 setState() 한번에 화면이 재시작되면서

state도 최신화 된다.

 

- setState()는 외부 에서 현재상태를 가져오는 것이나 외부의 객체를 직접 사용하는 것은 매우 비효율적이라고 한다.

따라서 현재 상태를 가져오는 방법으로서 매개변수를 사용해서 현재 상태를 가져오는데

class App extends React.Component {
  state = {
    count: 0
  }
  add = () => {
    this.setState(a => ({ count: a.count + 1 }));
  };

  minus = () => {
    this.setState(current => ({ count: current.count - 1 }));
  };
  render() {


    return (
      <div>
        <h1>This number is {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    )
  }
}

setState() 안에 a 라는 매개변수는 state의 현재 상태를 나타내고 매개변수를 받은 익명함수는 

setState가 최신화 하는 state가 된다.

 

 

 

life cycle method

- react를 사용하면 각 컴포넌트 단위로 UI를 화면에 보이게하고 바꾸고 삭제한다.

따라서 각각의 component들은 이러한 생성 - 업데이트 - 삭제 과정을 거치게 된다.

이러한 과정이 바로 component의 life cycle method이다.

 

- react가 component들을 생성하고 없애는 방법이다.

- component들이 생성될때 render() 되기 전에 여러 함수들이 자동으로 호출된다.

 

Mounting

- component가 태어나는 과정이다.

- component가 실행되고 결과물로 나온 element들이 가상 DOM에 삽입되고 실제 DOM을

업데이트 하기까지의 과정이다.

mounting 되는 과정은 아래 순서대로 일어난다. 

 

• constructor() : JS에서 class안의 생성자이다. 즉 component는 주로 class를 이용해서 구현하는데
• class로 객체를 만들면 반드시 constructor()함수가 가장 먼저 실행된다.
• static getDerivedStateFromProps() :잘 사용되지 않는다.
• render() : 스크린에 표시를 해주려고하는 함수. 컴포넌트가 실행되면 mount되기 때문에 당연히 render()가 실행된다.
• componentDidmount(): 해당 component가 이전에 mount되었는지 알려주는 함수이다.

 

따라서 이함수들이 위실행순서에 맞게 행동하는지 알기위해서 

class App extends React.Component {
  state = {
    count: 0
  }
  constructor(props) {
    super(props);
    console.log("im constructor");
  }
  add = () => {
    this.setState(a => ({ count: a.count + 1 }));
  };

  minus = () => {
    this.setState(current => ({ count: current.count - 1 }));
  };
  componentDidMount() {
    console.log("im componentDidMount");
  }
  render() {
    console.log("im rendering");
    return (
      <div>
        <h1>This number is {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    )
  }
}

Updating 

- component가 업데이트되는 과정이다.

- setState()을 할 때 마다 발생한다.

 

• static getDerivedStateFromProps():
• shouldComponentUpdate():기본적으로 업데이트를 할지 말지에 대한 함수
• render(): 
• getSnapshotBeforeUpdate():
• componentDidUpdate(): 해당 component가 update되었는지 알려주는 함수

 

Unmounting

- component가 삭제되는 과정이다.

- 페이지가 바뀔때, state가 바뀔때 등등.. 다양한 상황에서 component는 unmounting된다.

 

• componentWillUnmount(): 컴포넌트가 DOM에서 제거될때 사용된다.

import React from 'react';
//import PropTypes from 'prop-types';



class App extends React.Component {
  state = {
    count: 0
  }
  constructor(props) {
    super(props);
    console.log("im constructor");
  }
  add = () => {
    this.setState(a => ({ count: a.count + 1 }));
  };

  minus = () => {
    this.setState(current => ({ count: current.count - 1 }));
  };
  componentDidMount() {
    console.log("im componentDidMount");
  }
  componentDidUpdate() {
    console.log("Hey iam updated");
  }
  componentWillUnmount() {
    console.log("Goodbye component");
  }
  render() {
    console.log("im rendering");
    return (
      <div>
        <h1>This number is {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    )
  }
}

export default App;