useState()

최종 수정 : 2024-06-17

useState()

리액트 훅 함수 중에서 가장 많이 사용된다. 컴포넌트를 위해 리액트가 값을 관리하고 싶을 때 사용한다.

 

# 불변 상태를 캐시하는 useState

useState 훅은 가변 상태를 캐시한다. useState 훅이 반환한 세터 함수는 리액트가 컴포넌트 내부의 생태 변화를 쉽게 감지할 수 있게 해준다. 즉, 세터 함수가 호출되면 컴포넌트의 상태에 변화가 있는 것으로 판단하고 즉시 해당 컴포넌트를 다시 렌더링한다.

 

컴포넌트 호출과 호출 사이에 상태를 유지하고 컴포넌트의 상태 변경을 리액트에 알리는 가장 간단한 방법은 useState 훅이다. 상태 관리를 위한 도움을 리액트에게 요청하는 함수인 것이다. useState()를 호출하면, 훅이 최신 상태 값을 반환하면서 값을 변경할 떄 쓸 수 있는 함수(갱신 함수 or Updater 함수)도 함께 반환한다.

 

# 지연 계산 초기

컴포넌트가 상태의 초깃값을 계산하기 위해 일부 작업을 수행해야 하는 경우도 있다.

function untangle (aFrayedKnot) {
  // 값비싼 데이터 해석 절차를 수행
  return nugget;
}

function ShinyComponent ({tangledWeb}) {
  const [shiny, setShiny] = useSate(untangle(tangledWeb));
  
  // shiny 값을 사용하고 새로운 shiny 값을 설정하도록 허용함
}

이처럼 값비싼 untangle 함수를 매번 다시 실행하는 것은 시간 낭비다. 다행히 useState 훅은 함수를 인자로 받을 수 있다. 이런 인자를 '지연 계싼 초기 상태(lazy initial state)'라고 부르기도 한다. 이처럼 상태 초기값을 생성하기 위해 비싼 작업을 수행해야 하는 경우에는 지연 계산 초기 상태를 사용하는 게 좋다.

function ShinyString ({tangledWeb}) {
  const [shiny, setShiny] = useState(() => untangle(tangledWeb));
  
  // shiny 값을 사용하고 새로운 shiny 값을 설정하도록 허용함
}

 

---

참고 자료

리액트 모던 웹 개발 with 타입스크립트(p.283-285)

리액트 훅 인 액션 (p.69-70, 82-83)