State & useState

state란?

State는 Toggle Switch나 카운터처럼 컴포넌트 내부에서 변할 수 있는 값입니다.

실제 애플리케이션에서는 쇼핑몰 장바구니를 예로 들어보면, 사용자는 구매할 물건과 당장은 구매하지 않을 물건을 체크박스에 체크하여 구분 짓습니다. 이를 장바구니 내에서의 상태로 구분해 본다면 check 된 상태와 check 되지 않은 상태입니다.

이처럼 컴포넌트 내에서 변할 수 있는 값, 즉 상태는 React state로 다뤄야 합니다.

useState 사용법

리액트에서는 state를 다루는 방법 중 하나로 useState라는 특별한 함수를 제공합니다.

useState를 이용하기 위해서는 React로부터 useState를 불러와야 합니다. 상단에 import 키워드로 useState를 불러옵니다.

import { useState } from "react";

이후 useState를 컴포넌트 안에서 호출해 줍니다. useState를 호출한다는 것은 "state"라는 변수를 선언하는 것과 같으며, 이 변수의 이름은 아무 이름으로 지어도 됩니다. 일반적인 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 함수가 끝나도 사라지지 않습니다.

 

문법적으로 보면 아래 예시의 isChecked, setIsChecked는 useState의 리턴값을 구조 분해 할당한 변수입니다.

function CheckboxExample() {
// 새로운 state 변수를 선언하고, isChecked라고 부릅니다.
 const [isChecked, setIsChecked] = useState(false);

function CheckboxExample() {
  // 1번 코드를 풀어쓰면
  const [isChecked, setIsChecked] = useState(false); // 1번
  
  // ...
  
  // 밑의 2번 코드와 같습니다.
  const stateHookArray = useState(false); // 2번
  const isChecked = stateHookArray[0];
  const setIsChecked = stateHookArray[1];
}

useState를 호출하면 배열을 반환하는데, 배열의 0번째 요소는 현재 state 변수이고, 1번째 요소는 이 변수를 갱신할 수 있는 함수입니다. useState의 인자로 넘겨주는 값은 state의 초기값입니다.

const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);

수도 코드를 실제 코드로 작성해봅시다.

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);
  // const [state 저장 변수, state 갱신 함수] = useState(state 초기 값);

• isChecked : state를 저장하는 변수
• setIsChecked : state isChecked를 변경하는 함수
• useState : state hook
• false : state 초기값

이 state 변수에 저장된 값을 사용하려면 JSX 엘리먼트 안에 직접 불러서 사용하면 됩니다. 여기서는 isChecked가 boolean 값을 가지기 때문에 true or false 여부에 따라 다른 결과가 보이도록 삼항연산자를 사용합니다.

<span>{isChecked ? "Checked!!" : "Unchecked"}</span>

state 갱신하기

state를 갱신하려면 state 변수를 갱신할 수 있는 함수인 setIsChecked를 호출합니다.

이번 예시의 경우, input[type=checkbox] JSX 엘리먼트의 값 변경에 따라서 isChecked가 변경되어야 합니다. 브라우저에서 checked로 값이 변경되었다면, 리액트의 isChecked도 변경되어야겠죠?

사용자가 체크박스 값을 변경하면 onChange 이벤트가 이벤트 핸들러 함수인 handleChecekd를 호출하고, 이 함수가 setIsChecked를 호출하게 됩니다. setIsChecked가 호출되면 호출된 결과에 따라 isChecked 변수가 갱신되며, 리액트는 새로운 isChecked 변수를 CheckboxExample 컴포넌트에 넘겨 해당 컴포넌트를 다시 렌더링 합니다.

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);
  
  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };
  
  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChanged={handleChecked} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
      </div>
    );
 }

state hook 사용 시 주의점

react 컴포넌트는 state가 변경되면 새롭게 호출되고, 리렌더링 됩니다.

이 것을 확인하고 싶다면 console.log를 찍어보면 됩니다. 컴포넌트의 상태가 변경될 때마다 새롭게 호출되고 리렌더링 되는 것을 확인할 수 있습니다.

 

react state는 상태 변경 함수 호출로 변경해야 합니다. 강제로 변경을 시도하면 안됩니다. 상태 변경 함수 사용은 react와 개발자의 약속이기 때문에 지켜주셔야합니다. 강제 변경을 시도하면, 리렌더링이 되지 않는다거나, state가 제대로 변경되지 않습니다.

// -> useState를 꼭 사용해서 변경하기만 해야하고, state.push(), state[1]=2, state = "wrong state"; 등으로 바꾸는 것을 불가능합니다.

 

출처 : 코드스테이츠