[React] useState 사용법 정리

useState 개요

React 16.8 이전 버전에서는 함수형 컴포넌트에서 상태를 관리할 수 없었지만, React는 React 16.8에서 Hook이라는 개념을 추가하며 Hook을 통해 class를 작성하지 않고도 state와 같은 React 기능들을 사용할 수 있습니다.

오늘은 Hook 중 하나인 use.State를 정리하겠습니다.

 

 

useState 변수 선언

import React, { useState } from 'react';

 리액트에서 useState 함수를 불러옵니다.

function 예제() {
  const [state, setState] = useState(0);
  //const [상태값 저장, 상태값 갱신 변수] = useState(초기값);

useState는 상태 변수와 상태를 갱신할 수 있는 함수, 이 두 가지를 반환합니다.

상태 변수와 상태 갱신 함수의 이름은 위 적혀진 state 외에 use, name 등 자유롭게 지을 수 있습니다.

useState의 인수는 상태 변수의 초기 값이며 객체나 숫자타입 문자타입 모두 가질 수 있습니다.

 

useState 예제

import React, { useState } from 'react';

function click() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
       클릭 횟수{count}
      </button>
    </div>
  );
}

버튼에 onClick 이벤트 핸들러로 클릭 시 setState 함수를 호출 합니다.

리렌더링 시에 useState를 통해 반환받은 첫 번째 값은 업데이트를 통한 최신 state입니다.

 

state 불변성

리액트의 상태 값은 불변성을 지켜야 합니다.

여기서 불변성이란 값이나 상태를 변경할 수 없는 것 입니다.

이러한 이유는 리액트는 상태 업데이트 시 얕은 비교를 수행합니다. 이것은 객체의 프로퍼티를 하나씩 비교하는 것이 아닌

참조 값만 비교하여 상태변화를 감지합니다.

이전 state와 이후 state를 비교할 때 state 변수의 메모리영역의 값을 직접 변경하면 

리액트는 state가 바뀌었다고 인지하지 못하고 re-rendering을 할 수 없습니다.

 

불변성의 설명을 돕자면 자바스크립트의 데이터 타입은 원시타입과 참조 타입으로 나눌 수 있습니다.

원시타입: 고정된 크기로 메모리에 저장하며 실제 값을 할당  (Boolean, String, Number, null, undefined, Symbol)

참조타입: 데이터 크기가 정해지지 않고 메모리에 저장, 데이터의 값이 heap에 저장되며 변수에 heap 메모리의 주소값이 할당.

( Object, Array)

원시타입은 실제값을 할당하며 참조타입은 위치값을 저장합니다.

 

원시타입 예시

let num = 1 // 변수 num에 1이 메모리 영역1에 등록 
num = 2 // 변수 num에 1이 메모리 영역2에 등록

원시타입의 num 변수를 1에서 2로 변경 시 새로운 영역으로 등록하므로 불변성을 지킴.

 

참조타입 예시

let arr = [1, 2, 3] // 메모리영역 1
arr.push(5) // 메모리영역 1 - 기존 데이터 수정으로 불변성을 지키지 않음

arr = [1, 2, 3] // 메모리영역 2 - 새로운 참조값 할당

arr.push(5) : 기존 데이터 추가로 불변성을 지키지 않음

 

불변성을 지키는 방법

원시타입은 값을 바로 넣어주지만 참조타입은 새로운 배열을 반환하는 메소드를 사용합니다.

// 원시타입
const [number, setNumber] = useState(0)
setState(1)

// 참조타입
const [numberarray, setNumberarray] = useState({1, 2, 3, 4})
setState({...numberarray, 5}