useState

hyocho·2023년 2월 8일

React

목록 보기

6/24

👻useState란?

컴포넌트 상태관리를 도와주는 리액트 훅

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

사용법

컴포넌트 상단에서 선언해준다.
[something, setSomething] 으로 이름 짓는 것이 일반적이다.

반환값

현재값. 처음으로 렌더링 될 때 지정한 초깃값으로 정해줄 것이다.
상태값 갱신 함수는 다른 값으로 업데이트 해 줄 것이다.

주의사항

useState는 hook이므로 컴포넌트 최상단에서만 쓸 수 있다. 조건문이나 반복문 안에는 사용할 수 없다.

setState (상태 값 갱신 함수)

const [name, setName] = useState('hyo');

function handleClick() {
  setName('cho');
  setAge(a => a + 1);
  // ...

setState?

set함수를 사용하여 상태를 업데이트하고 렌더링 시킬 수 있다. 다음 상태를 직접 전달하거나 이전 상태에서 계산하는 함수를 전달할 수 있다.

반환값

없음

주의사항

다음 렌더시의 값을 업데이트 한다. set 함수를 호출한 후 상태 변수를 읽으면 여전히 호출 전에 화면에 있던 이전 값을 얻게 된다.

💥set 함수를 호출해도 이미 실행 중인 코드의 현재 상태는 변경되지 않는다.
✨다음 렌더링부터 시작하여 useState가 반환하는 항목에만 영향을 미친다

import { useState } from 'react';

function MyComponent() {
  const [age, setAge] = useState(20);
  const [name, setName] = useState('hyo');
  // ...
  
function handleClick() {
  setName('cho');
  console.log(name); // Still "hyo"!
 }
}
//바뀐 값을 확인하려면 함수 바깥에서 console.log를 확인해보자.

리액트는 상태 업데이트를 일괄 처리(batch)한다.
모든 이벤트 핸들러가 실행되고 set함수를 처리하고 업데이트 한다. 이렇게 하면 여러번 렌더링 되는 것을 막을 수 있다.

function handleClick() {
  setAge(age + 1); // setAge(20 + 1)
  setAge(age + 1); // setAge(20 + 1)
  setAge(age + 1); // setAge(20 + 1)
}
//age는 23이 아닌 21이다.

function handleClick() {
  setAge(a => a + 1); // setAge(21 => 22)
  setAge(a => a + 1); // setAge(22 => 23)
  setAge(a => a + 1); // setAge(23 => 24)
}