[React] 클래스형, 함수형 컴포넌트를 통한 Counter

본 글은 도서 '리액트를 다루는 기술'을 공부하며 정리한 글입니다.

1. 클래스형 컴포넌트를 통한 Counter 

클래스형 컴포넌트를 만들기 전에, 기본적으로 알아야 할 state와 props에 대한 간단한 설명을 하자면, state는 클래스형 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다. 또한, props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, props를 사용하는 컴포넌트는 읽기 전용으로만 사용할 수 있습니다. props의 변화를 주기 위해선, 부모 컴포넌트에서 바꾸어 주어야 합니다.

1.1) 클래스형 App.js 생성

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        
      </div>
    );
  }
}

export default App;

 

1.2) state 선언

counter의 현재 값을 표현하기 위해 필요한 state로 number가 필요합니다. state를 선언하기 위해서 앱이 실행되기 전 발생하는 constructor 메서드 안에서 선언하는 방법도 있지만, 아래와 같이 선언하여도 무방합니다.

 

import React, { Component } from 'react';

class App extends Component {
  state = {
    number: 0,
  };
  render() {
    return (
      <div>
        
      </div>
    );
  }
}

export default App;

 

1.3) 레이아웃 구성

h1 태그를 통해 this.state.number을 불러와 화면에 표시해주었고, +1, -1 역할을 하는 버튼을 생성하였습니다.

 

import React, { Component } from "react";

class App extends Component {
  state = {
    number: 0,
  };
  render() {
    return (
      <div>
        <h1>{this.state.number}</h1>
        <div>
          <button>-1</button>
          <button>+1</button>
        </div>
      </div>
    );
  }
}

export default App;

 

1.4) 버튼 기능 추가

state 값의 변화를 주기 위해서 setState를 사용합니다. 아래와 같이 +1 버튼 클릭 시, state 값의 변화를 주기 위해 setState를 호출하였고, state의 number 값을 this.state.number값에서 1을 더한 값으로 설정하여 주었습니다.

 

import React, { Component } from "react";
import "./App.css";

class App extends Component {
  state = {
    number: 0,
  };
  render() {
    return (
      <div>
        <header className="App-header">
          <h1>{this.state.number}</h1>
          <div>
            <button
              onClick={() => this.setState({ number: this.state.number - 1 })}
            >
              -1
            </button>
            <button
              onClick={() => this.setState({ number: this.state.number + 1 })}
            >
              +1
            </button>
          </div>
        </header>
      </div>
    );
  }
}

export default App;

 

아래와 같은 화면이 출력된다면, 클래스형 Counter를 잘 만드신 겁니다!

 

 

2. 함수형 컴포넌트를 통한 Counter

리액트 16.8 이전 버전에서는 함수형 컴포넌트에서 state를 사용할 수 없었습니다. 하지만, 16.8 이후부터는 useState라는 Hooks를 사용하여 함수형 컴포넌트에서도 state를 사용할 수 있게 되었습니다. 

2.1) 함수형 App.js 생성

아래와 같이 함수형 컴포넌트를 생성하고 레이아웃을 구성해줍니다.

 

import React from "react";
import "./App.css";

const App = () => {
  return (
    <div>
      <div>
        <header className="App-header">
          <h1></h1>
          <div>
            <button>-1</button>
            <button>+1</button>
          </div>
        </header>
      </div>
    </div>
  );
};

export default App;

2.2) useState 선언

useState는 react에서 가져와 import 해줄 수 있고, 배열 비구조화 할당으로 아래와 같이 선언할 수 있습니다. useState(0)에서 0은 number의 초깃값이고, setNumber은 number값의 변화를 줄 수 있는 함수입니다. state와 setState의 조합을 useState를 통해 선언한 것으로 생각하시면 됩니다.

 

import React, {useState} from "react";
import "./App.css";

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div>
      <div>
        <header className="App-header">
          <h1></h1>
          <div>
            <button>-1</button>
            <button>+1</button>
          </div>
        </header>
      </div>
    </div>
  );
};

export default App;

 

2.3) useState 사용

버튼 클릭 시, setNumber을 호출하여 number값을 -1 하거나, +1 할 수 있는 기능을 각각의 버튼에 넣어 주었습니다.

 

import React, { useState } from "react";
import "./App.css";

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div>
      <div>
        <header className="App-header">
          <h1>{number}</h1>
          <div>
            <button onClick={() => setNumber(number - 1)}>-1</button>
            <button onClick={() => setNumber(number + 1)}>+1</button>
          </div>
        </header>
      </div>
    </div>
  );
};

export default App;

 

마찬가지로 아래와 같이 잘 랜더링 되는 것을 확인할 수 있습니다.

 

 

이번 글에서는 클래스형 컴포넌트의 state, 함수형 컴포넌트의 hooks(useState)를 통하여 counter를 생성해보았습니다. 앞에서 클래스형 컴포넌트 생성 방법을 배웠지만, 앞으로 새로운 컴포넌트를 만들 때는 useState를 사용하는 함수형 컴포넌트를 사용하는 것을 권장합니다. 코드의 간결함은 물론, 리액트 개발팀이 함수형 컴포넌트와 Hooks을 사용하는 것을 주요 컴포넌트 개발 방식이 될 것이라고 공지했기 때문입니다.