[React] Hook과 상태관리(useState)

* 이 포스팅은 플러터와 비교하며 작성했으므로, 플러터를 모른다면 불편할 수 있다.

 

상태관리

플러터를 어느정도로 배웠다면 리액트의 상태 관리 개념은 매우 쉽게 이해할 것이다.

익숙한 setState도 리액트에서 동일한 개념과 명칭으로 사용되며, 클래스에서만 사용가능하다는 점도 동일하다.

플러터에서는 stateful과 stateless 클래스가 기본으로 제공되었다면 리액트에서는 상태가 필요할 땐 클래스를,

상태가 필요하지 않을 때는 function을 사용한다.

 

하지만 플러터의 그것보다 귀찮고 Stateful Builder처럼 편리한 위젯도 기본으로 존재하지 않는다.

플러터의 Provider와 GetX가 외부 개발자에 의해 개발되고 널리 사용된 것처럼,

리액트에서도 Hook이라는 패키지로 상태 관리가 매우 수월해졌다.

플러터 Provider의 Consumer가 데이터가 변경되면 setState가 이루어지는 것과 매우 흡사하다고 볼 수 있다.

 

 

Hook

앞서 상태관리에 대해서만 설명했으나, Hook은 굉장히 포괄적인 기능들을 포함하고 있다.

랜더링이 된 이후나 setState가 되기 전/후에 동작하도록 하는 함수인 useEffect, context를 편리하게 관리하는

useContext 등이 있다. Hook의 기본과 가장 많이 사용하는 useState를 먼저 배워보자.

 

useState를 import

import React, { useState } from 'react';

 

Hook을 사용한다면 컴포넌트(위젯)를 생성하기 위해 클래스를 선언할 필요가 없다.

따라서 function이나 arrow 형태(함수표현식)로 컴포넌트를 생성하면 된다.

 

const App = () =>{
return <MyCounter />;
}

function MyCounter() {
	//첫 번째 요소에는 변수명, 두 번째 요소에는 set 함수명을 타이핑한다. 
    //useState()에는 초기 값을 삽입한다.
  const [value, setValue] = useState(0);
  return (
    <div>
      <p>
        현재 카운터 값은 <b>{value}</b> 입니다.
      </p>
      //setValue(값)으로 호출한다.
      <button onClick={()=>setValue(value + 1)}>+1</button>
      <button onClick={()=>setValue(value - 1)}>-1</button>
    </div>
  )
}

 

 

setValue(value + 1)은 value = value + 1 을 수행한 후 setState를 하는 것이라고 간단히 설명할 수 있으며

플러터로 표현하면 아래와 같다.

 

var value;

set setValue(value) {
	setState((){
        this.value = value;
        })
  }
  

 

 

아래는 버튼을 클릭했을 때 style이 변경되는 예제이다.

const [color, setColor] = useState("black");


return (
  <div>

  <h2 style={{ color }}>{count}</h2>
//스타일 지정시에는 object의 형식으로 하지 않아도 된다.


  <button onClick={() => setColor("red")}>Red Color</button>
  <button onClick={() => setColor("blue")}>Blue Color</button>

...

 

 

주의할 점

React에서는 state를 관리할 때 배열이나 객체를 그냥 수정 해서는 안되고 반드시 사본을 만든 후 업데이트 해야한다.

const object = {a : 1, b : 2};
const copyObject = {...object, b : 3};
//spread (...) 연산자를 사용한다.