리액트 : 클래스형 컴포넌트와 state

[참고 문헌 : Do it! 클론 코딩 영화 평점 웹서비스]

클래스형 컴포넌트

클래스형 컴포넌트를 작성해보자.

//App.js
import React from 'react';

class App extends React.Component{

}

export default App;

다음과 같이 App이라는 클래스가 React.Component를 상속받도록 클래스를 작성한다. 함수형 컴포넌트에서는 return값으로 JSX를 반환했지만 클래스는 컴포넌트를 사용할 수 없다. 이를 해결하기 위해 클래스형 컴포넌트에서는 render()함수를 사용한다.

//App.js
import React from 'react';

class App extends React.Component{
  	render(){
    	return <h1>This is Class_Component</h1>;    
	}
}

export default App;

리액트가 클래스 안의 render()함수를 자동으로 실행시켜 주기 때문에 직접 실행하지 않아도 알아서 실행된다.

우리가 간단한 함수형 컴포넌트를 놔두고 클래스형 컴포넌트를 사용하는 이유는 동적 데이터를 사용하기 위함이다. 동적 데이터를 사용하려면 state를 사용해야 한다.

state

state는 객체 형태의 데이터로 클래스형 컴포넌트 안에서 소문자로 state={};라고 작성한다.

//App.js
import React from 'react';

class App extends React.Component{
  
  state = {
    count: 0,
  };
  
  plus = () => { this.setState({ count : this.state.count+1})};
  
  minus = () => { this.setState({ count : this.state.count-1})};
  
  render() {
    return (
      <div>
    	  <h1>Count : {this.state.count}</h1>
        <button onClick={this.plus}>Plus</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    );
  }
}

export default App;

위의 코드를 보면 state안에 count라는 키가 있고 plus와 minus 버튼을 통해 count를 증감시키는 함수를 호출한다.

• state.count : state 안의 count키 값을 읽어온다.
• setState() : 비동기로 상태를 변화시킨다.

setState() 함수가 동작하면 state가 변경되고, 이어서 자동으로 render()함수가 실행되어 화면이 업데이트 된다.


실행 화면은 다음과 같다.