#3.0 Class Components and State

 

jsx도 알고 props도 알았으면 이제는 state에 대해서 배워보자!

 

Food 예제와는 굿바이 - 

 

 

state는 보통 우리가 동적 데이터와 함께 작업할 때 만들어진다. 변하는 데이터, 존재하지 않는 데이터, 그리고 생겨나고 그러고선 사라지고 또는 변경된 데이터, 하나인 데이터 그리고 두 개가 되고 또는 0이 되는 그런 종류의 것들

이런 것들이 dynamic data들이다. 그리고 이런 것은 props가 아니라 state를 이용해야 한다. 

const Food 도 지우고, Food()도 지운다.

그리고 우리는 function component를 class component로 변경할 것이다.

function App()을 다 지운다.

class App (<- 아래 export default App 과 같은 이름) 을 만든다.

class App extends React.Component{

}

class App은 react component이기 때문에 위의 코드는 필수로 적어줘야 하는 것들이다.

왜냐하면 react component는 뒤에 많은 것들을 가지고 있다. 그 중하나가 우리가 이야기 할 state이다.

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

ex)

baby extends from human

so, human으로 부터 모든 것(특징)을 가져올 수 있고 그것으로부터 확장되는 것이다.

 

삼성도 cell phone class로 확장된 것이다.

만약 너가 비디오 게임 개발을 한다면, 너는 삼성을 프로그래밍하지 않고, 아이폰을 프로그래밍 하지 않고, cell phone을 프로그래밍하잖아. cell phone은 많은 특성들을 가지고 있다. 예를 들어 screen, camera, charger 등등

Iphone과 Samsung은 이러한 공통적인 것들을 공유해. 그래서 너는 camera, screen, charger를 cell phone class 에 넣은 다음 cell phone class 에서 확장한 samsung class를 가지게 된다.

즉, 삼성 class는 cell phone class로 부터 모든 것을 가져오게 된다.

 

즉, App은 기본적으로 react class component에서 가져오고 있다. 우리는 거기서 확장하고 있다. 이제 우리의 App component는 react component이다. 매우 간단하쥬?~

 

 

 

하지만 react component는 어떻게 동작할까? class react component는 return을 가지고 있지 않는다.

왜냐하면 function이 아니기 때문이다. App component는 React Component에서 확장했기 때문에 render method를 가지고 있다.

= react componet는 render method를 가지고 있다. 나는 react component를 확장했다. 그래서 나도 이제 render method를 가지고 있을 수 있다.

  render(){

    return <h1>I am a Class Component</h1>;

  }

 

* function component와 class component는 차이점이 있다.

funciton component는 function이고 뭔가를 return해야 하고, 화면에 표시된다.

class component는 class이지만 react component로 부터 확장되어서 render method를 사용해 화면에 표시될 수 있다.

react는 자동적으로 모든 class componet의 render method를 실행하고자 한다.

react는 자동적으로 너의 class component의 render method를 실행한다.

그래서 우리가 화면에 "I am a class component"라고 띄울 수 있는 것이다.

 

 

그렇다면 왜 function component를 사용하지 않고 class component를 사용하는 것일까?

그것은 바로 class component가 가진 state라는 것 때문이다!!

state는 object이다. component의 data를 넣을 공간이 있고 이 데이터는 변한다.

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

class App extends React.Component{
  state = {
    // 여기에 내가 바꿀 데이터를 넣는다
    count : 0
  };
  render(){
    return <h1>I am a Class Component</h1>;
  }
}

export default App;

class 안이기 때문에 {state.count}라고 적는 것이 아니라 {this.state.count}라고 해주어야 한다.

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

class App extends React.Component{
  state = {
    // 여기에 내가 바꿀 데이터를 넣는다
    count : 0
  };
  render(){
    return <h1>The number is {this.state.count}</h1>;
  }
}

export default App;

 하지만 내가 말했듯이 우리는 state에 바꾸고 싶은 data를 넣는 것이다. 여기서 문제는 App에서 data를 어떻게 바꿀 것이가이다.!

 

우선

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

class App extends React.Component{
  state = {
    // 여기에 내가 바꿀 데이터를 넣는다
    count : 0
  };
  render(){
    return (
      <div>
        <h1>The number is {this.state.count}</h1>
        <button>Add</button>
        <button>Minus</button>
      </div>
    );
  }
}

export default App;

보다시피 JSX는 변경되지 않았고 HTML도 정상이다. 차이점은 state가 class component에 있다는 점이다. 따라서 우리는 this.state를 할 필요가 있다. 우리는 component의 data를 바뀍를 원해서 이 작업을 하고 있는 것을 기억해라!

다시!!!! react.js는 JavaScript이다. 우리는 JavasScript를 쓸 수 있다.

class는 JavaScript에서 왔다. 만약 class를 모른다면 ES6의 최신버전에 관한 니꼴라스의 코스를 들어랏!

 

 

이제~!~! 두 개의 function을 작성하는 것이다. 이건 react 코드가 아니라 JavaScript 코드다

class 내부에 add ()라는 function을 넣어보자.

  add = () => {}

  minus = () => {}

우리는 이 function들을 어떻게 쉽게 호출할 수 있을까?

button으로 가서 onClick이라는 prop이 기본적으로 있기 때문에 이것을 사용해볼 것이다.

이건 react의 masic이다

JavaScript에서는 다른 onClick이나 eventLisener를 등록해야할 것이다. 여기 react에서는 자동적으로 주어진 onClick을 가지고 있다.

그건 그렇고 이 button은 HTML 요소이다. 

class App extends React.Component{
  state = {
    // 여기에 내가 바꿀 데이터를 넣는다
    count : 0
  };
  add = () => {
    console.log("add");
  }
  minus = () => {
    console.log("minus");
  }
  render(){
    return (
      <div>
        <h1>The number is {this.state.count}</h1>
        <button onClick = {this.add}>Add</button>
        <button onClick = {this.minus}>Minus</button>
      </div>
    );
  }
}

{this.add()}이렇게 하지 않는다. 이건 function이라고 부르고 우리는 이렇게 하지 않고 {this.add} 이렇게 한다

왜냐하면 click을 했을 때만 function이 호출되길 원하기 때문이다! 즉시가 아니라!

() 는 즉시를 의미한다!

 다음 비디오에서는 어떻게 state를 업데이트 할 수 있을지에 대해서 배워보자!