useState Hook

안녕하세요.
이번 시간은 React에 내장된 기본 Hook useState, useEffect, useContext 중 useState 에 대해 공부 한 내용을 정리해보겠습니다.

Hook이란 특별한 함수이다.

Hook은 React 버전 16.8부터 React 요소로 새로 추가되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다. (공식문서참조 : https://ko.reactjs.org/)

useState Hook이란?

useState는 리액트를 배우게 되면 가장 먼저 배우게 되는 함수입니다.
useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해줍니다.

State란?

state(상태)는 리액트에서 화면을 그려내는 데 굉장히 중요한 역할을 합니다.
상태가 바뀔 때마다 화면을 새롭게 그려내는 방식으로 동작을 합니다.

리액트에서 state를 만들고, state를 바꾸기 위해서는 useState를 활용해야 합니다.

useState를 사용해봅시다.

먼저 useState Hook을 최상단에 import 해옵니다.

import React, { useState } from 'react';

export default function App() {
  return (
  // ...
}

 

아래와 같이 state 변수와 해당 state를 변경할 수 있는 함수(setState)를 만듭니다. useState의 인자값으로 '안녕'을 넘겨주면 state 초기값을 '안녕' 데이터를 저장합니다.

그리고 return문 안에 {}를 사용해서 원하는 곳에 데이터 바인딩을 합니다.

import React, { useState } from 'react';

export default function App() {
  const [state, setState] = useState('안녕');
  
  return (
    <>
      <p>{state}</p>
    </>
  );
}

 

대괄호를 이용하여 state 변수를 선언하는 것을 아래와 같이 볼 수 있습니다.

useState 함수를 만들때 Destructuring 문법으로 작성해야합니다.

 

  const [state, setState] = useState('');

 

구조분해할당

useState 함수가 초깃값을 아규먼트로 받습니다.
아래와 같이 문자형, 숫자형, 객체, 배열 무엇이든 중요한 데이터를
state에 데이터에 저장할 수 있습니다.

그리고 두 번째 변수에는 set을 붙이고 카멜 케이스로 이름을 지어주면 됩니다.

 

  const [state, setState] = useState('');
  const [count, setCount] = useState(0);
  const [object, setObject] = useState({});
  const [array, setArray] = useState([]);

 

첫 번째 요소가 상태이고, 두 번째 요소가 상태를 바꾸는 setter 함수입니다.

상태 변경은 변수에 새로운 값을 할당하는 방식으로 변경하는 것이 아니라 이 setter 함수를 활용해야 합니다.

setter 함수는 호출할 때 전달하는 아규먼트 값으로 state 값을 변경해 줍니다.

useState를 이용해서 변수를 선언하면 2개의 아이템 쌍이 들어있는 배열 형태로 만들어집니다.

 

이제 setter 함수를 활용해서 이벤트 핸들러를 등록하고 이벤트가 발생할 때마다 상태가 변경하는 함수를 만들어 보겠습니다.

아래와 같이 setCount로 상태를 변경해주면 됩니다.

import { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <p>
        You clicked {count} times
      </p>
      <button
        type="button"
        onClick={() => setCount(count + 1)}
      >
        Click me!
      </button>
    </>
  );
}

 

코드를 실행해보면 처음 상태(초기값) 0으로 보여집니다.

count = 0

 

Click me! 버튼을 1번 클릭하였더니 상태가 변경 되는 것을 확인 할 수 있습니다. 이렇게 이벤트가 발생할 때마다 상태가 변하면서 화면이 새로 그려집니다.

 

count = 0 + 1

지금까지 useState를 사용해서 상태 관리하는 방법을 알아보았습니다.