useState

학습 키워드

useState
- initialState
- state
- setState
  - 비동기와 일괄처리(batch)
  - 클로저와 큐

📖 useState

state(상태)를 생성하고 업데이트(setState)를 통해 화면(UI)을 (리)렌더링하는 기능을 제공한다.

🤖 useState 사용법

import { useState } from "react"; // 사용을 위해 import 해줘야 하고,

const [state, setState] = useState(초기값); // 해당 코드처럼 최상위에 선언해준다.

state 생성과 동시에 가져야 할 초기값을 useState 함수에 인자로 넣어주면 state, setState 두가지의 요소를 배열 형태로 리턴해준다.

최초 렌더링시 state는 인자로 받은 초기값을 가지고 있고, setState는 state를 변경하는 함수를 가지고 있다.

useState(initialState)

import { useState } from 'react';

function MyComponent() {
  const [age, setAge] = useState(28);
  const [name, setName] = useState('Taylor');
  const [todos, setTodos] = useState(() => createTodos());

}

매개변수 initialState 은 상태의 초기값을 지정한다.
매개변수로 콜백함수도 선언이 가능하다.
- 대규모 배열을 생성하거나 비용이 많이 드는 계산을 수행하는 경우
- useEffct 사용없이 useState 초기값으로 재생성 방지

state

const [form, setForm] = useState({
   firstName: 'Barbara',
   lastName: 'Hepworth',
   email: 'bhepworth@sculpture.com',
});

// 직접적으로 값을 입력하게 되면 리렌더링이 발생하지 않음.
form.firstName = "Taylor" 

// setForm 상태변화 함수를 통한 변경 
setForm({
  ...form,
  firstName: 'Taylor'
});

state를 변경하고 싶다면 setState 함수를 호출하고 인자로 변경하고 싶은 값을 넣어주면 state값이 변경되고 state를 가지고 있는 컴포넌트가 렌더링(업데이트)하게 된다.

setState(nextState)

비동기로 동작하여 state를 변경해주는 함수이다.
이전의 상태값을 얻고 싶다면 콜백함수를 매개변수로 넣어주어야 한다.

import { useState } from 'react';

export default function Index() {
  const [count, setCount] = useState(0);
  const onClick = () => {
    setCount(count + 1); // 0 + 1
    setCount(count + 1); // 0 + 1
    setCount(count + 1); // 0 + 1   <- 이 코드만 적용됨
    console.log(count); // 0
  };
  return (
    <div>
      <p> 현재 state : {count}</p>
      <button type="button" onClick={onClick}>
        +3
      </button>
    </div>
  );
}

위의 코드를 실행 보면 console.log(state) 값은 이전의 상태값인 0이 출력되고, state 값은 1이다. ⇒ 이렇게 동작하는 이유는 setState 함수가 비동기적으로 동작하고 React가 하나의 이벤트 핸들러 함수 내의 로직을 모두 읽을 때까지 기다린 다음에 일괄 처리(Batch)해 한번에 렌더링하기 때문이다.

🤔 왜 React는 상태값을 변경하는 함수를 비동기적으로 처리하게 만들었을까?

React 애플리케이션은 수 많은 컴포넌트와 상태값으로 이루어져있다. 이런 상황에서 단 하나의 상태가 변화할 때마다 관련된 뷰를 매번 리렌더링하는 것은 비효율과 함께 성능상의 문제를 야기한다.

🤔 연속된 setState를 처리하는 방법은?

setState함수의 인자로 함수를 전달한다.
useEffect의 의존성 배열을 활용하면 된다.

import { useState } from 'react';

export default function Index() {
  const [count, setCount] = useState(0);
  const onClick = () => {
    setCount((count) => count + 1); // 0+1 count → 1
    setCount((count) => count + 1); // 1+1 count → 2
    setCount((count) => count + 1); // 2+1 count → 3
    console.log(count); // 0
  };
  return (
    <div>
      <p> 현재 state : {count}</p>
      <button type="button" onClick={onClick}>
        +3
      </button>
    </div>
  );
}

🔗 참고

PreviousReact의 Hook NextuseReducer

Last updated 1 year ago