[React Hooks] useState

개요

• 리액트에서 state라는 값을 선언하고 변경할 수 있는 Hook

import { useState } from "react";

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

// Typescript
const [state, setState] = useState<T>(initialState);

• state
  • 우리가 사용하고자 하는 값, 즉 현재 상태 변수.
• setState
  • state를 변경하는 (정확히 말하면 state에 새로운 값을 할당하는) 함수
  • 이 함수를 사용할 경우 state를 사용하는 컴포넌트를 재렌더링한다.
    • 리액트는 Virtual DOM을 사용하여 변경된 부분만 업데이트하기 때문
• initialState
  state의 초깃값.
  const a = 10;이라는 변수 선언문이 있을 때, a가 state이고 10이 initialState라고 이해하면 쉽다.
  * useState의 인자로 initialState를 주지 않거나, null을 주는 것도 가능하다.
  
  
  

setState의 특징

사용예시

const [name, setName] = useState("철수");

console.log(name); // 철수

function setNameFunc() {
  	setName("영희"); // ! 비동기로 동작하는 함수 !
	console.log(name); // 철수
}

• setState 이전과 이후 값이 동일할 경우 재렌더링이 일어나지 않는다.
  • 불필요한 렌더링을 막으므로 최적화에 도움이 된다.
• setState는 비동기로 동작하는 함수이다.
  setState를 호출하면 state를 업데이트 후, 컴포넌트를 재렌더링한다.
  호출 직후 state를 읽으면, 업데이트 전 값을 출력한다.
  * 그러므로 업데이트 후 값을 출력하려면 아래와 같이 동기적으로 처리해보자.
  
  

setState를 동기적으로 실행하기

콜백함수 이용하기

const [name, setName] = useState("철수");

function setNameFunc() {
  	setName("영희", () => {
      	console.log(name); // 영희
    });
}

setName 함수를 실행 후 콜백함수를 호출해주면 우리가 원하는대로 동기적으로 작업을 실행할 수 있다. 그러나 이런 콜백함수가 더 많아진다면? 복잡해질것이다.

updater(previousState) 사용하기

const [name, setName] = useState("철수");

function setNameFunc() {
	setName("영희"); // 영희
  	setName(prev => "김" + prev); // 김영희
}

함수의 인자로 다음과 같은 함수(updater)를 전달한다. 이전 상태의 값을 기준으로 새로운 값을 업데이트한다.

주의 사항

• useState는 Hook이므로 컴포넌트의 최상위 레벨에서만 호출할 수 있다.
  • 컴포넌트 내의 함수, 조건문, 루프 블럭 등에서 호출할 수 없다.
• state는 반드시 읽기 전용이어야 한다.
  • 값을 직접 변경해서는 안된다! (Don't Mutate)
  • 새로운 객체를 만들어 setState의 인자로 전달한다.

const [name, setName] = ("철수");
name = "영희"; // (X) 이런 방식의 값 변경은 절대 금지!
setName("영희"); // (O) "영희"라는 새로운 객체를 만들어 할당한다.

참고 링크

https://ko.react.dev/reference/react/useState
https://velog.io/@dosilv/TIL-React-setState-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0-648sv7je