React! Hook 의 기본 useState 에 대해서 알아보자!

 

일단 Hook을 좀 더 잘 이해하기 위해서는 몇몇 용어에 대한 이해하고 보면 더 잘 이해가 간다고 합니다!

 

일단 함수와 컴포넌트의 미세한 차이를 알아야 하는데요.

 

react 에서

 

• 함수는 하나의 기능 단위를 의미
• 컴포넌트는 랜더링 단위(즉 화면에서 나타내는 하나의 작은 단위)를 의미

라는 차이가 있다고 합니다.

 

보통 우리가 경험하는 리랜더링이 되는 타이밍은 어느때일까요?

 

페이지를 열면 화면이 바뀌는 것 ->ComponentDidMount

페이지를 useState 등으로 업그레이드 할때! ->ComponentDidUpdate

 

크게 보면 총 2가지의 경우가 있습니다.

 

이러한 리 랜더링과 관련된 기능으로서 리액트 v16.8에 도입된 기능이 HOOK 이라는 기능입니다.

 

이중에 가장 기본적인 useState  에 대해서 알아보도록 하겠습니다.

 

일단 이러한 훅들을 이용하기 위해서는 아래와 같이 import 를 통해 기능을 가져와야 합니다.

hook 을 사용하기위해 import 한 useOOO 기능들.

const [value, setValue] = useState('');

UseState 함수가 호출되면 배열을 반환하는데 첫번째 원소는 상태값(value), 두번째 원소는 상태를 설정하는 함수(setValue) 이다. 그리고 useState () 안에는 초기값을 넣어 줄 수 있다.

 

여기서 한가지 특징은 만약 상태값의 명칭이 value 더라도 꼭 set 뒤에 동일한 이름을 쓰지 않아도 된다.

그냥 상태값과 그 상태값을 컨트롤 해주는 함수가 쌍으로 useState를 통해 묶인것이다.

 

딱 이것만 기억하면 될듯 싶다.

 

useState 를 사용하면 하나의 상태값과 그것을 컨트롤 하는 하나의 함수가 쌍으로 존재하며 상태값이 바뀔때 마다, 즉 set함수가 작동할 때 마다 value 값은 그때 그때 변하고 리랜더링도 바로 바로 된다라는 점.

 

import React, { useState } from 'react';

const App = () => {
  const [value, setValue] = useState(0); // 초기값을 0으로 설정
  return (
    <div>
      <p>
        현재 카운터 값은 <b>{value}</b> 입니다.
      </p>
      <button onClick={() => setValue(value + 1)}>+1</button>
      <button onClick={() => setValue(value - 1)}>-1</button>
    </div>
  );
};

 

button의 onClick 이 작동할 때 마다 useState 를 통해 쌍으로 잡혀진 set 함수가 value 값을 1씩 증가시킨다.

 

그리고 1씩 증가 혹은 감소할 때마다(상태가 바뀔 때 마다) 화면에 즉각적으로 리 랜더링을 통해 나타난다.