#3.0 Class Components and State

#3.0 Class Components and State

🍧 이번 시간에는 state에 대해 배워보겠다.

이제 state에 대해 배워볼 것인데, state는 보통 우리가 동적 데이터와 함께 작업할 때 만들어진다.

그러나 우리가 지난시간 까지 했던 food 예제는 일일이 데이터를 손으로 입력했기 때문에 state를 배우기에 적절한 예제가 아니므로 지운다.

 

import React from "react";

import PropTypes from "prop-types";



export default App;

( 이 상태에서 시작! )

 

🍧 클래스 컴포넌트 사용하기

import React from "react";

import PropTypes from "prop-types";

class App extends React.Component{

  render(){

    return <h1>Im a class component</h1>

  }

}

export default App;

우리는 클래스 컴포넌트를 사용해볼 것이다. 지난시간까지 했던 function 컴포넌트와는 다르다. 이 클래스 컴포넌트는 리액트 컴포넌트를 확장하고 있다.

클래스 컴포넌트는 return을 가지고 있지 않다. 함수가 아니기 때문이다. 보다시피 render 메소드를 가지고 있다.

React Component가 render 메소드를 가지고 있기 때문에 나도 extends를 이용해서 확장을 해줬기 때문에 나도 render 메소드가 있는 것이다.

 

🍧 Class 컴포넌트 vs Function 컴포넌트

보다시피 클래스 컴포넌트랑 함수 컴포넌트는 차이가 존재한다.

함수 컴포넌트는 함수고 뭔가를 return 한다. 그리고 스크린에 표시된다.

그러나 클래스 컴포넌트는 클래스이고 리액트 컴포넌트로부터 확장되고 스크린에 표시된다. 그리고 너는 그걸 render 메소드 안에 넣어야만 한다.

 

***리액트는 자동적으로 모든 클래스 컴포넌트의 렌더 메소드를 실행하고자 한다.

 

🍧 클래스 컴포넌트를 사용하는 이유 - state 때문에

그렇다면 왜 클래스 컴포넌트를 가져오려는 걸까? 함수 컴포넌트는 쉬웠는데 왜 클래스 컴포넌트에 대해 이야기해야하는거야?라고 생각할 수 있다.

우리가 클래스 컴포넌트를 이야기하는 이유는 클래스 컴포넌트가 가진 우리가 원하는 state라고 불리는 녀석 때문이다.

 

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는 객체이고, 데이터를 넣을 공간이 있고 이 데이터는 변한다. 이게 state를 사용하는 이유이다.

우리는 state 안에 count라는 데이터를 넣고 기본적으로 0으로 셋팅한다.

말했다시피 너가 바꿀 데이터를 state 안에 넣는다.

그리고 state를 render에 넣고 싶으면 {}안에 this.state.count라고 쓰면 된다. 클래스이기 때문에 this를 붙여주어야 한다.

위와 같이 작성하고 확인해보면 The number is 0 이라고 뜬다.

 

여기서 문제는 App에서 data를 어떻게 바꿀것인가 이다.

 

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>

  );

  }

}

코드를 조금 수정했다. Add 버튼과 Minus 버튼을 만들었다.

 

react.js도 자바스크립트이기 때문에 우리는 자바스크립트를 쓸 수 있다.

우리는 add와 minus라는 함수를 만든다. 이것은 리액트 코드가 아니라 자바스크립트 코드이다.

 

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>Add</button>

      <button>Minus</button>

    </div>

  );

  }

}

작성한 함수를 어떻게 호출할 수 있을까? button으로 가서 onClick이라는 prop에 함수를 추가하면 된다.

 

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>

  );

  }

}

add()라는 식으로 쓰지 않도록 주의한다. 왜냐하면 ()는 즉시 실행하는 것인데, 우리는 즉시 실행하는 것이 아니라 클릭했을 때에만 함수가 호출되기를 원하기 때문이다.

 

다음 시간에는 state안의 데이터를 어떻게 업데이트할 수 있을지에 대해서 해보도록 하겠다!