[React] Hook - useState

hook은 웹 사이트의 상호 작용을 가능하게 하고 변경 가능한 상태를 만드는 방법입니다.
React는 실시간 웹 상호 작용으로 인해 새로고침을 하지 않아도 실시간으로 결과가 반영되는 부분에 있어서 장점이 있습니다.
다만 평범하게 React로 코드를 구성했다고 해서 실시간으로 반영이 되는 것이 아니라 hook을 사용해야 합니다.
간단한 프로그램을 만들어 보면서 학습해보도록 하겠습니다.

 

 

import React from "react";
import ReactDOM from "react-dom";

var count = 0;

function increase(){
  count++;
  console.log(count);
}

ReactDOM.render(
  <div className="container">
    <h1>{count}</h1>
    <button onClick={increase}>+</button>
  </div>,
  document.getElementById("root")
);

 

 

버튼을 누르게 되면 값이 1씩 올라가는 버튼을 만들어주었습니다.
count라는 숫자 변수를 만들고 버튼을 누르게 되면 increase 함수가 실행되어 count 변수의 값이 1씩 올라가게 됩니다.
결과와 콘솔에서 확인할 수 있듯이 정상적으로 1씩 추가되는 것을 확인할 수 있습니다.
하지만 렌더링 된 유저 인터페이스 화면에서는 0으로 계속 고정된 상태입니다.
React-Dom을 사용해서 페이지에 렌더링 되고 있기 때문에 업데이트 하려면 이 모든 요소들을 다시 렌더링해야 합니다.

그렇다면 다시 렌더링을 시켜주도록 코드를 작성해보겠습니다.

 

 

import React from "react";
import ReactDOM from "react-dom";

var count = 0;

function increase(){
  count++;
  ReactDOM.render(
    <div className="container">
      <h1>{count}</h1>
      <button onClick={increase}>+</button>
    </div>,
    document.getElementById("root")
  );
  console.log(count);
}

ReactDOM.render(
  <div className="container">
    <h1>{count}</h1>
    <button onClick={increase}>+</button>
  </div>,
  document.getElementById("root")
);

 

이런식으로 버튼을 눌렀을 때 작동하는 increase 함수에 React-Dom의 render 함수를 다시 넣어주면 실시간으로 렌더링된 결과를 볼 수 있습니다.
동일한 렌더링 코드를 함수에 다시 넣는 구조를 보면 알 수 있듯이 딱 봐도 정말 비효율적이라는 것을 알 수 있습니다.
이럴 때 useState를 활용하면 됩니다.
useState hook을 사용하면 렌더링 함수를 중복으로 비효율적으로 사용할 필요없이 상태값을 hooking 하여 실시간으로 인터페이스에 적용합니다.

 

 

import React, {useState} from "react";

function App() {
  const [count, setCount] = useState(0);
  
  function increase(){
    setCount(count + 1);
    console.log(count);  
}

  function decrease(){
    setCount(count - 1);
    console.log(count);  
  }

  return (
    <div className="container">
      <h1>{count}</h1>
      <button onClick={increase}>+</button>
      <button onClick={decrease}>-</button>
    </div>
  )
}

export default App;

 

증가 / 감소

useState는 React가 가지고 있는 hook 라이브러리 중 하나입니다.
따라서 hook인 useState를 사용하기 위해서는 import 를 따로 해주거나 사용할 때, React.useState 형식으로 사용해주면 됩니다.
위에 작성한 예시 코드를 가지고 정리해보겠습니다.

 

- const [count, setCount] = useState(0);
useState를 사용하면 초기 설정값을 지정해줄 수 있습니다.
이 useState를 담을 변수와 변경값을 대괄호에 묶어주는 형식으로 사용하는데, 여기서는 count 변수가 useState로 지정한 초기 설정값인 0이 들어가게 됩니다.
setCount는 이 초기 설정한 count값에 변화시킬 상태값이 들어갈 변수입니다.
즉, useState() 를 통해 count 변수에 초기값이 설정되고, 이후 만들어질 동작 로직을 통해 setCount에 count 변수에 적용될 변동 상태값이 들어가게 됩니다.
이 setCount 가 반영이 되게 되면 count 에는 최신의 수정사항이 반영된 상태의 데이터가 렌더링되게 되는 것입니다.

 

- function increase() / decrease()
increase 함수에는 count변수의 state 값을 변동시킬 로직이 들어가게 됩니다.
앞서 정리했던 것처럼 setCount 에는 useState 지정값에 적용될 변동 상태값이 들어간다고 하였는데, 
increase 함수에는 1씩 올라가게끔 하기 위해 count + 1 이라는 상태값이 들어가게 되는 것입니다.
decrease 함수에는 1씩 줄어들게끔 하기 위해 count - 1 이라는 상태값이 들어가게 되는 것입니다.

 

 

이렇게해서 상태를 변경함에 따라 동적으로 인터페이스가 변경될 수 있도록 렌더링 되는 useState hook을 알아보았습니다.
이제 새로고침을 할 필요없이 실시간으로 변경해줄 수 있을 것입니다.
추가적으로, 이런 hook을 사용할 때 주의해야할 것은 독립적으로 사용할 수는 없다는 것입니다.
즉, 함수 안에서 사용이 가능하다는 뜻입니다.