Sample Study - Movie List(3)

Nomad Coder - React Fundamentals 2019 따라가기

 

class와 state

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

class App extends React.Component{

  state ={
    count:0
  };

  add = () =>{
    console.log("add");
  };

  remove = () =>{
    console.log("minus");
  };

  render(){
    return <div>
      <h1>Count : {this.state.count}</h1>
      <button onClick={this.add}>Add</button>
      <button onClick={this.remove}>Minus</button>
      </div>
  }
}
export default App;

 

앞선 예제와 비교해보면 function App ~~~ 부분이 class App 으로 바뀌었다.

React.Component를 extends한다(필수)

이렇게 하면 render method를 사용할 수 있다.

render method에서 return하여 view를 나타낼 수 있다.

 

state는 React에서 쓰는 object로 따로 return문 안에서 {this.state}로 사용하는 것을 기억하자.

 

add = ()=>{};

remove= ()=>{};

는 es6의 function 문법이다. 사용하는 것도 보는 것도 익숙해질 필요가 있다.

 

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

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

내가 만약 짠다면 

function add(){

  this.state.count = this.state.count +1;

}

이 되었을 것이다.

하지만 React에서는 이런식으로 짜게 되면 render method를 실행해 값을 다시 뿌려주지 않는다.

여기서 쓰는것이 setState이다.

 

setState를 하면 state의 값을 변화 시키고 이어서 render()역시 작동하여 값이 변하게 된다.

 

Component Life Cycle에 대해서는 아래 링크로 대체한다.

https://ko.reactjs.org/docs/react-component.html