[React] useState

React@18.2.0 공식 문서 일부를 번역한 글입니다. 

useState

useState는 컴포넌트에 상태 변수를 추가할 수 있도록 하는 리액트 훅입니다.

const [state, setState] = useState(initialState)

 

 

useState(initialState)

컴포넌트 최상단에서 useState를 호출해 상태 변수를 선언하세요.

import { useState } from 'react';

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

배열 디스트럭처링을 사용해 [something, setSomething]과 같이 상태 변수의 이름을 짓는 것이 관습입니다.

매개변수

• initialState: 상태의 초기값. 모든 타입의 값이 가능하지만, 함수의 경우 특이하게 동작합니다. 이 인자는 초기 렌더링 이후에는 무시됩니다.
  • initialState로 함수를 전달할 경우, 해당 함수는 initializer function으로 취급됩니다. 이 함수는 순수함수로, 인수를 전달 받지 않고, 값을 반환해야 합니다. 리액트는 컴포넌트 초기화 시 이 함수를 호출해 반환값을 초기 상태로 저장합니다.

반환값

useState는 정확히 두 값을 가진 배열을 반환합니다.

1. 현재 상태. 최초 렌더링 동안 현재 상태는 전달한 initialState과 같습니다.
2. 상태를 다른 값으로 갱신하고 리렌더링을 발생시키는 set 함수

 

주의

• useState는 훅입니다. 따라서 컴포넌트나 커스텀 훅의 최상단에서만 호출할 수 있습니다. 반복문이나 조건문 내부에서는 호출할 수 없습니다. 이것이 필요한 경우 새로운 컴포넌트를 추출해 상태를 해당 컴포넌트로 이동시키세요.
• Strict Mode에서 리액트는 의도치 않은 비순수성을 찾아낼 수 있도록 initializer 함수를 두 번 호출합니다. 이것은 개발 모드에서만 적용되며 프로덕션 빌드에는 영향을 끼치지 않습니다. initializer 함수를 순수함수로 잘 작성했다면, 이 과정은 컴포넌트 로직에 영향을 주지 않아야 합니다. 두 번의 함수 호출 중 하나의 결과값은 무시됩니다.

 

---

set 함수: setSomething(nextState)

useState가 반환하는 set 함수는 상태를 다른 값으로 갱신하고 리렌더링을 발생시킵니다. 1. 다음 상태를 직접 전달하거나 2. 이전 상태를 기반으로 다음 상태를 계산하는 함수를 전달할 수 있습니다 :

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

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

매개변수

• nextState : 상태가 될 값. 모든 타입의 값이 가능하지만, 함수의 경우 특이하게 동작합니다.
  • nextState에 함수를 전달할 경우, updater 함수로로 동작합니다. 이 함수는 순수함수로, *pending state(대기 상태)*만 인자로 전달받아 다음 상태를 반환해야 합니다. 리액트는 updater 함수를 큐에 넣고, 컴포넌트를 리렌더링합니다. 다음 렌더링 동안 리액트는 큐에 있는 모든 updater 함수를 이전 상태에 적용해 다음 상태를 계산합니다.

반환값

set 함수는 반환값이 없습니다.

 

주의

• set 함수는 다음 렌더링을 위한 상태 변수만 갱신합니다. set 함수를 호출한 후 상태 변수를 참조할 경우, set 함수 호출 이전 화면에 있던 값이 계속 표시됩니다.
• Object.is로 비교했을 때 현재 상태와 주어진 새로운 값이 같다면, 리액트는 해당 컴포넌트와 자식 컴포넌트들을 리렌더링하지 않습니다. 이는 최적화를 위한 것입니다. 리액트가 자식 컴포넌트들을 건너뛰기 전에 컴포넌트를 호출하는 경우도 있지만, 이 과정이 코드에는 영향을 주지 않습니다.
• 리액트는 상태 갱신을 일괄 처리합니다. 리액트는 모든 이벤트 핸들러가 실행되어 내부 set 함수를 호출한 이후 화면을 갱신합니다. 이는 하나의 이벤트 실행 동안 여러 번의 리렌더링이 발생하는 것을 방지합니다. 드물지만 DOM에 접근하는 것처럼 리액트가 화면을 미리 갱신하도록 해야 한다면 flushSync를 사용할 수 있습니다.

 

 

REF

https://react.dev/reference/react/useState

useState – React