[React] 클래스 스타일 vs 함수 스타일

서론

저번 글까지 CRUD를 구현하면서 컴포넌트를 class 스타일로 만들었었다.

하지만 최신 리액트에서 함수 스타일에도 훅(hook)이라는 개념이 도입돼 클래스 스타일과 대등한 존재로 격상했다.

대부분의 리액트 자료는 클래스 스타일로 설명돼있기 때문에 배우는 것이 좋다고 한다.

과거엔 함수형 스타일에서는 state값을 가질 수 없었음.

 

프로젝트 만들기

npx create-react-app
create-react-app func-class-style

cmd 창에 이렇게 입력해주고 새로 만든 프로젝트의 필요없는 index.css, App.css를 모두 주석처리 해준다.

 

클래스형 스타일에서 state를 사용하는 방법

function App() {
	return(
    	<div className='App'>
        	<h1>Hello World</h1>
            <ClassComp initNumber={2}></ClassComp>
        </div>
    )
}

예시로 ClassComp 라는 컴포넌트에 initNumber이라는 값을 props로 준다.

이 props를 사용하려면 클래스형 스타일에서는

this.props.initNumber

이렇게 사용한다.

이제 이 props를 state의 초깃값으로 설정하고 마구 바꿔보자.

똑같이 App.js에 작성돼도 괜찮다.

class ClassComp extends React.Component {
  state = {
    number:this.props.initNumber
  }
  render() {
    return (
      <div className='container'>
        <h2>class style component</h2>
        <p>Number : {this.state.number}</p>
        <input type="button" value="random" onClick={
          function() {
            this.setState({number:this.state.number + 1});
          }.bind(this)
        }></input>
      </div>
    )
  }
}

ClassComp 컴포넌트에 state를 만들어주고 number의 초깃값을 props로 받은 initNumber로 설정해준다.

그리고 버튼을 클릭할 때마다 setState 함수를 이용해 1씩 증가시킨다.

이게 클래스형 스타일로 state를 사용하는 방법이다.

 

함수형 스타일로 state를 사용하는 방법 - 훅(hook)

훅은 이름이 use로 시작한다. 따라서 리액트에서 제공하는 훅의 이름은 useState이다. -> 페이스북에서 제공하는 내장된 훅

클래스형 스타일에서 구현했던 것과 같이 훅을 이용해 구현해보겠다.

import React, {useState} from 'react';

일단 useState를 사용하기 위해 import해준다.

먼저 함수형 스타일의 useState는 어떻게 생겼는지 파헤쳐보자.

function App() {
  return (
    <div className='App'>
      <h1>Hello World</h1>
      <FuncComp initNumber={2}></FuncComp> 
      <ClassComp initNumber={2}></ClassComp>
    </div>
  );
}

처음으로, 함수형 스타일의 컴포넌트를 만들어보자.

이 컴포넌트는 initNumber값을 props로 준다.

function FuncComp(props) {
  var numberState = useState(props.initNumber);
  var number = numberState[0];
  var setNumber = numberState[1];
  console.log('numberState ', numberState);
  return (
    <div className='container'>
      <h2>function style component</h2>
      <p>Number : {props.initNumber}</p>
      <input type="button" value="random" onClick={
        function() {
          setNumber(Math.random());
        } 
      }></input>
    </div>
  );
}

함수형 스타일은 useState를 사용한다.

numberState라는 변수에 useState 함수의 반환값 즉, initNumber를 저장하고

number 변수에 numberState의 1번지, setNumber 변수에 numberState의 2번지 값을 저장한다.

그리고 numberState를 console에 출력해보자.

(2)는 numberState의 크기이고, [2, f]는 numberState의 값이다.

즉, numberState는 배열이라는 뜻임!

첫번째 요소(0) 값엔 state의 값이 있고, 두번째 요소(1) 값은 이 state 값을 변경할 수 있는 함수가 들어있다.

 

state를 클래스형/함수형으로 응용해보기

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

function App() {
  생략
}

function FuncComp(props) {
  var numberState = useState(props.initNumber);
  var number = numberState[0];
  var setNumber = numberState[1];

  var dateState = useState((new Date()).toString());
  var _date = dateState[0];
  var setDate = dateState[1];

  console.log('numberState ', numberState);
  return (
    <div className='container'>
      <h2>function style component</h2>
      <p>Number : {number}</p>
      <p>Date : {_date}</p>
      <input type="button" value="random" onClick={
        function() {
          setNumber(Math.random());
        } 
      }></input>
      <input type="button" value="date" onClick={
        function() {
          setDate((new Date()).toString());
        }
      }>
      </input>
      
    </div>
  );
}

class ClassComp extends React.Component {
  state = {
    number:this.props.initNumber,
    date: (new Date()).toString()
  }
  render() {
    return (
      <div className='container'>
        <h2>class style component</h2>
        <p>Number : {this.state.number}</p>
        <p>Date : {this.state.date}</p>
        <input type="button" value="random" onClick={
          function() {
            this.setState({number:Math.random()});
          }.bind(this)
        }></input>
        <input type="button" value="date" onClick={
          function() {
            this.setState({date:(new Date()).toString()});
          }.bind(this)
        }>
        </input>
      </div>
    )
  }
}

export default App;

random 버튼을 누르면 무작위의 숫자로 바뀌고, date 버튼을 눌렀을 때 시간이 업데이트 된다.

위의 배웠던 내용을 응용한다면 충분히 이해 가능하니까 응용해보길

 

완성본

 

useState를 간단하게 사용하려면?

var [_date, setDate] = useState(new Date()).toString();

실제로 이렇게 더 많이 쓴다고 함.

 

담소

처음 훅에 대해서 배웠는데 생각보다 어렵지 않고 재밌는 듯 ㅎㅎ

얼른 실제 프로젝트에 써보고 싶다!