[React] 함수형 컴포넌트 상태관리 Hooks useState 사용법 알아보기

react useState 사용하는 방법 예시 코드

🍟React Hooks이란?

Hooks은 리액트 16.8 버전에서 새로 도입된 상태 관리 기능이다.

기존의 함수형코드에서는 관리하지 못했던 상태 관리가 Hooks을 통해서 가능해졌다.

React Native의 경우에는 0.59 버전부터 Hook을 지원한다고 한다.

 

React에서는 함수형 컴포넌트와 Class형 컴포넌트 두 가지 형태로 코드를 작성하는데,

기존의 함수형 컴포넌트에서는 React State의 생명주기 기능을 이용할 수 없었다.

 

하지만 hooks 기능이 추가되면서 이제는 함수형 컴포넌트에서도 생명주기 기능을 연동할 수 있게 된다.

Hooks은 클래스형 컴포넌트에서는 동작하지 않는다.

 

hooks 업데이트 이후에도 클래스형 컴포넌트는 그대로 사용이 가능 때문에,

Hooks의 기능을 위해서 기존 코드를 모두 바꾸는 것은 권장하지 않고

새로운 컴포넌트를 작성할 때부터 Hooks을 이용해주면 된다.

 

 

👓useState

useState는 가장 기본적인 hook이다.

해당 기능을 이용하면 컴포넌트가 다시 랜더링이 되어도 state값이 그대로 유지된다.

useState는 현재의 값을 저장하는 기능과 업데이트하는 함수를 쌍으로 제공한다.

해당 함수는 이벤트 핸들러에서 호출이 가능하다.

 

가장 기본적인 숫자 값을 카운터 코드를 만들어 보겠다.

 

Counter.js 

import React, {useState} from 'react';

const Counter = ()=> {
  //counter라는 새 상태 변수를 선언한다.
  const [counter, setCounter] = useState(0);

  return (
      <div>
        <p> 현재카운트 <b>{counter}</b></p>
        <button onClick={()=>setCounter(counter+1)}>+1</button>
        <button onClick={()=>setCounter(counter-1)}>-1</button>
      </div>
  )
};

export default Counter;

useState를 사용하려면 import 구문에 useState를 입력해줘야 한다.

첫 번째 지정된 counter는 원소의 상태 값을 저장하며

두 번째 저장된 setCounter라는 원소는 상태를 설정하는 함수이다.

 

useState()에서는 인자로 초값 State값을 하나 받을 수 있는데

위 코드는 0을 넣어줘서 counter에 초기값으로 0을 세팅해 주었다.

 

화면상에서는 counter 함수를 가져와서 현재 상태 값을 화면에 보여주고

click 이벤트 리스너에서는 setCounter를 이용해서 counter 값을 더하고 빼주는 함수를 호출한다.

 

 

App.js

import React from 'react';
import Counter from './Counter'


function App() {
    return (
        <div>
            <Counter />
        </div>
    );
}

export default App;

위 코드 작성이 완료가 되었다면 app.js에 만들어진 Counter.js를 import 시킨 뒤 렌더링 시켜준다.

 

React로 만든 Counter

 

👨‍👩‍👧‍👦여러 State 변수 선언하기

컴포넌트 안에서 useState는 여러 번 선언이 가능하다.

또한 초기 값으로는 아까처럼 숫자뿐만 아니라 문자, 그리고 배열을 넣는 것도 가능하다.

 

Counter.js

import React, {useState} from 'react';

const Counter = () => {
    const [counter, setCounter] = useState(0);
    const [name] = useState('ORDINARY Code');
    const [list] = useState([{text: '샘플코드', category: 'React'}]);

    return (
        <div>
            <p>블로그명 : {name}</p>
            <p>블로그리스트</p>
            <ul>
                {list.map((text, index)=> (
                <li key={index}>[{text.category}] {text.text}</li>
                ))}
            </ul>
            <p> 현재카운트 <b>{counter}</b></p>
            <button onClick={() => setCounter(counter + 1)}>+1</button>
            <button onClick={() => setCounter(counter - 1)}>-1</button>

        </div>
    )
};

export default Counter;

기존에 작성한 Counter.js에 name과 list라는 useState를 추가했다. 

기본적으로 useState에서는 하나의 상태 값만 관리할 수 있기 때문에 여러 개의 상태 값을 관리하고 싶을 경우 useState를 여러 번 사용하면 된다.

 

초기값으로는 텍스트와 배열을 넣어준 뒤, 다시 컴포넌트를 랜더링 해보자

useState 여러번 사용하기

새로 추가한 useState에서 넣어준 초기값들이 잘 보이는 것을 확인할 수 있다.