[React] Hooks - useState ( )

[React] Hooks - useState ( )

 

📌 useState

함수형 컴포넌트에서는 '상태' 를 관리할 수 없었다.

하지만 React 16.8 에서 Hooks 가 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 된 것이다!

 

'상태' 란 무엇일까?
상태는 컴포넌트에서 동적인 값을 말한다.

함수형 컴포넌트에서는 변하는 상태의 개별적인 업데이트가 요구된다.

클래스형 컴포넌트에서는 데이터를 교체하고 하나로 합친다.

 

✅ useState

React 16.8부터 사용할 수 있게 된 Hooks 중의 하나인 useState 는 컴포넌트의 상태를 관리할 수 있다.

useState()는 state와 state를 업데이트 하는 함수를 쌍으로 제공한다.

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

상태 유지 값(state)과 그 값을 갱신하는 함수(setState)를 반환한다.

 

✅ state

최초로 렌더링될 때 state 값은 useState 에 전달된 인자인 initialState 와 값이 같다.

초기 값은 함수형 컴포넌트가 첫 렌더링 될 때 딱 한 번 사용한다!

 

✅ setState

setState 는 함수이다.

setState 는 state 를 갱신할 때 사용한다.

새 state 값을 받아 컴포넌트 리렌더링을 큐에 등록한다.

 

setState(newState);

다음 리렌더링 시에 useState 를 통해 반환받은 첫 번째 값(state)은 항상 갱신된 최신 state 가 된다.

 

📌 동일한 값이 업데이트 된다면?

갱신된 값은 갱신되기 이전의 값을 바탕으로 계산된다.

하지만 업데이트 함수가 현재 상태와 동일한 값을 반환한다면 리렌더링되지 않는다.

 

📌 useState 훅을 사용하여 카운터 함수 구현해보기

import React, { useState } from 'react';
import './style.css';


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

  return (
    <div>
      <div>
        <button onClick={() => setCount((prevCount) => prevCount - 1)}>
          -
        </button>
        <div className="result">{count}</div>
        <button onClick={() => setCount((prevCount) => prevCount + 1)}>
          +
        </button>
      </div>
      <div>
        <button className="reset" onClick={() => setCount(initialCount)}>
          Reset
        </button>
      </div>
    </div>
  );
}

초기값인 initialCount 는 매개변수 부분에서 초기값을 0으로 설정해두었다.

따라서 맨 처음 state 의 값은 0이다.

버튼에 onClick 이벤트로 state 를 변경시키는 setCount 함수를 매개변수를 설정했다.

이제 버튼을 클릭할 때마다 해당 핸들러 함수가 실행되면서 count 의 값을 변화시킨다.

state 는 버튼을 누르는 순간의 현재의 값을 기준으로 변화한다.

 

 

 

 

---

참고 : 리액트 공식 문서, 벨로퍼트와 함께하는 모던 리액트, 멋쟁이사자처럼 4기 yamoo9 수업
  등을 공부하고, 간단하게 정리한 내용입니다. 잘못된 부분이나 문제되는 점이 있으면 댓글 부탁드립니다.