[React] 상태변경 예제를 클래스형 setState과 함수형useState 모두 살펴보자

리액트는 컴포넌트 선언을 할 때 두 가지 방법이 있다.

하나는 클래스형, 다른 하나는 함수형이다.

 

예전에는 클래스형만이 상태변경에 따른 렌더링이 가능하여 클래스형을 많이 썼다고 하나,

최근에는 리액트 훅이 생겨나면서 리액트 훅 + 함수형 컴포넌트의 사용을 더욱 권장하는 시대라 한다.

 

나는 리액트를 2021년에 처음 맛보기 시작했으니 당연히 후자가 더 익숙했고, 후자의 방법밖에 몰랐으나, 노마드코더에서 전자의 방법을 알려주어 정리 겸 두 가지 방법 모두 기록해보려고 한다.

---

useState 기본예제 설계

리액트를 공부하는 분들이라면 지겹도록 많이 봤을 예제. Counter 예제를 setState/useState 리액트 훅을 이용하여, 혹은 only VanillaJS로만 이용하여 많이 만들어보았을 예제.

 

+를 누르면 state가 변경되어 1 증가하고,

-를 누르면 state가 변경되어 1 감소하는

아주아주 간단한 예제를 통해 정리해볼 생각이다.

---

클래스형 컴포넌트에서의 setState

import React from 'react';

class App extends React.Component{
  state={
    count: 0
  };
  add=()=>{
    this.setState(cur=>({count:cur.count+1}));
  };
  minus=()=>{
    this.setState(cur=>({count:cur.count-1}));
  };
  render(){
    return(
      <div>
        <h1>The Number : {this.state.count}</h1>
        <button onClick={this.add}>+</button><button onClick={this.minus}>-</button>
      </div>
    )
  }
}

export default App;

this를 이용하여 state와 함수들에 접근하는 것에 유의하자.

 

또한, 여기서 onClick은 js의 onClick과 유사해보이지만, React에 내장돼있는 onClick이라 한다.

React 내장 onClick이므로 eventListener로 따로 처리할 필요 없이 React에서 알아서 처리해준다고 한다.

 

js에 익숙하다면 모두 알고 있을 내용이겠지만, this.add(), this.minus()와 같이 ()를 붙이지 않는 것에 유의하자. ()를 붙이면 function실행이 바로 이루어지기 때문이다. 우리는 클릭시에만 함수가 실행되길 원하기 때문에 ()를 붙이지 않도록 한다.

 

만약 setState를 이용하지 않고 this.state.count=this.state.count+1과 같이 작성한다면 화면에서 count값이 변하지 않음을 확인할 수 있다. 이는 렌더링이 이루어지지 않기 때문인데, setState는 state가 변경될 경우 자동으로 렌더링하게 해주는 기능을 하고 있음을 확인할 수 있다.

---

함수형 컴포넌트에서의 useState 리액트 훅 사용

import React, {useState}from 'react';

function App() {
  const [count, setCount]=useState(0);
  const add=()=>{
    setCount(count+1);
  }
  const minus=()=>{
    setCount(count-1);
  }
  return(
    <div>
      <h1>The Number : {count}</h1>
      <button onClick={add}>+</button><button onClick={minus}>-</button>
    </div>
  )
}

export default App;

useState() 괄호 안의 값으로 state가 초기화된다. 위 코드의 경우 count의 초기상태는 0으로 초기화되는 셈.

 

클래스형과 다르게 this를 쓸 필요가 없다!

그리고 비교적 코드도 간단하다!

심지어 공식문서에서 클래스형보다 함수형+리액트훅 사용을 권장한다!! 모두 리액트훅을 씁시다!!

 

사실 위 코드 내용은 아래 링크에서 기가막히게 설명을 잘해주기 때문에 아래 링크를 타고 공부하는 걸 추천한다.

const [count, setCount]=useState(0); 과 같은 문법인 배열 비구조화 할당에 관해서도 알려준다.

https://react.vlpt.us/basic/07-useState.html

7. useState 를 통해 컴포넌트에서 바뀌는 값 관리하기 · GitBook

---

쓰다보니 너무 간단한 내용이긴 하지만,

노마드코더에서 Class형 컴포넌트를 사용하길래 함수형 복습 겸 정리해보았다.

 

또, 간단한 내용이긴 하지만 누군가에게 도움이 될 수도 있지 않은가.

같이 실력좋은 개발자가 됩시다!