ReactJS (4)

* Class Components and State

· state

: 보통 우리가 동적 데이터와 함께 작업할 때 만들어짐

변하는 데이터, 존재하지 않는 데이터 그리고 생겨나고 그러고선 사라지고 또는 변경된 데이터, 하나인 데이터 그리고 두 개가 되고 또는 0이 되는 그런 종류의 것들 -> dynamic data

그리고 이런 props를 우리는 돕지않음 우리가 필요한 건 state

 

· class Component

class App extends React.Component{} //필수 (class react component)

: react component는 뒤에 많은 것을 가지고 있고 그 중 하나가 우리가 이야기할 state

그리고 매번 우리가 component를 만들 때마다 모든 것을 다 구현하고 싶지 않음 (extend from한 이유)

class react component는 return을 가지고 있지 않음 (function이 아니기 때문)

render mothod를 가지고 있고, App component 안에 있음 (react component에서 확장했기 때문에)

 

· function component vs react component

function component: function이고 뭔가를 return 하고 screen에 표시됨

class component: class지만 react component로부터 확장되고 screen에 표시됨

그걸 render method 안에 넣어야만 함

react는 자동적으로 모든 class component의 render method를 실행하고자 함

 

* All you need to know about State

· state

: state는 object이고 component의 data를 넣을 공간이 있고 이 데이터는 변함

state는 object이므로 setState는 새로운 state를 받아야하고, 따라서 state({count:1})과 같이 작성해야함

 

  add = () => {

    this.setState({count: this.state.count+1});

  };

  minus = () => {

    this.setState({count: this.state.count-1});

 

보다는 아래의 방법이 좋음

//react에서 외부의 상태에 의존하지 않는 가장 좋은 방법

  add = () => {

    this.setState(current => ({count: current.count+1}));

  };

  minus = () => {

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

  };

 

setState를 호출할 때 마다 react는 새로운 state와 함께 render function을 호출

 

* Component Life Cycle

· life cycle method

: 기본적으로 react가 component를 생성하는 그리고 없애는 방법

 

- mounting (태어나는 것)

· constructor: JavaScript에서 class를 만들 때 호출되는 것

· static getDerivedStateFromProps() (범위 x)

· render()

· componentDidMount(): component가 처음 render 됨을 알려줌

 

- updating (일반적인 업데이트)

· static getDerivedStateFromProps() (범위 x)

· shouldComponentUpdate() (범위 x): 기본적으로 업데이트를 할지 말지를 결정하는 것에 대한 것

· render()

· getSnapshotBeforeUpdate() (범위x)

· componentDidUpdate()

 

- unmounting (component가 죽는 것)

· componentWillUnmount()

 

import React from 'react';

 

class App extends React.Component{

  state={

    count: 0

  };

  add = () => {

    this.setState(current => ({count: current.count+1}));

  };

  minus = () => {

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

  };

componentDidMount(){

  console.log("component rendered");

}

componentDidUpdate(){

  console.log("I just updated");

}

 

  render(){

    console.log("I'm rendering");

    return <div>

      <h1>The number is: {this.state.count}</h1>

      <button onClick={this.add}>Add</button>

      <button onClick={this.minus}>Minus</button>

      </div>;

  }

}

 

export default App;

 

* Planning the Movie Component

import React from 'react';

 

class App extends React.Component{

  state={

    isLoading: true,

    movies: []

  };

  componentDidMount(){

    setTimeout(()=>{

    this.setState({isLoading: false});

  }, 6000);

}

  render(){

    const {isLoading} = this.state;

    return <div>{isLoading ? "Loading..." : "We are ready"}</div>;

  }

}

 

export default App;