[React] useState Hook

1. useSate 소개

Component에 state 변수를 추가할 수 있는 React의 Hook이다.

import { useState } from 'react'

function App() {
  const [name, setName] = useState('Alvin')

  return (
    <>
      <h1>{name}</h1>
    </>
  )
}

export default App

Component의 최상단에서 useState를 호출하여, 위 코드와 같이 state 변수를 선언할 수 있으며, 아래와 같은 규칙을 따른다.

• array destructuring(배열 구조 분해)를 사용하여, [something, setSomething] 형태의 state 변수 이름을 사용 
• useState(initialState)는 parameter 값으로 initialState 값을 사용하며, type에 상관없이 원하는 state 값을 초기화 할 수 있으며, initialState 값은 초기 렌더링에 한 번만 사용된 이후로는 무시됨
• React는 Component를 initializing할 때, initializer function을 호출하고 return 값을 초기 state로 저장함
• useState는 두 개의 값을 담은 배열을 return 하며, 첫 번째 값은 현재의 state를 의미하고 렌더링 중에 전달한 초기 state와 동일한 값이며, 두 번째 값은 set function으로써 state를 다른 값으로 업데이트할 수 있으며, 다시 렌더링을 할 수 있는 트리거 역할을 함

다룰 때의 유의사항이다.

• useState는 Hook이므로, Component의 최상단이나 자체 Hook에서만 호출할 수 있으며, 루프나 조건 내에서는 호출할 수 없다.
  필요하다면, 새로운 Component를 추출하고 state를 해당 Component로 옮김
• Strict Mode에서 initializer function은 우발적인 실수 방지를 위해, useState를 두 번 호출함

2. set function

import { useState } from 'react'

function App() {
  const [name, setName] = useState('Alvin')
  const [age, setAge] = useState(20)

  function handleClick() {
    setName('Simon')
    setAge(a => a + 5)
  }


  return (
    <>
      <h1>{name}</h1>
      <h1>{age}</h1>
      <button onClick={handleClick}>Click Me</button>
    </>
  )
}

export default App

위 코드를 보면, useState에서 return된 set function을 사용하면 state를 다른 값으로 업데이트하고, 다시 렌더링을 트리거할 수 있으며, 다음 state를 직접 전달하거나 이전 state에서 이를 계산하는 function을 전달할 수 있다.

• parameter 값으로 원하는 모든 type의 state 값을 줄 수 있음
• set function의 특성으로, React는 update function을 queue에 넣고 component를 다시 렌더링하고, 다음 렌더링 동안 React는 대기 중인 모든 업데이트를 이전 state에 적용하여 다음 state를 계산함
• return 값을 갖고 있지 않음

다룰 때의 유의사항이다.

• set function은 오직 다음 렌더링을 위한 state 변수를 업데이트하며, 만약 set function 호출 뒤에 state 변수를 읽으면 호출 하기 전 스크린에 있던 이전 값을 얻을 수 있음
• 새로운 값이 Object.is 비교에 의해, 현재 state와 동일하면 React는 Component와 해당 자식 Component의 다시 렌더링하는 작업을 생략함
• React는 state 업데이트를 일괄적으로 처리한다. 모든 event handler가 실행되고, set function을 호출한 후에 스크린을 업데이트하며, 단일 이벤트 중 여러 번 다시 렌더링되는 현상을 방지할 수 있다.
  예를 들어, DOM에 접근하기 위해 React가 화면을 더 일찍 업데이트 하도록 강제해야 하는 드문 경우 flushSync를 사용할 수 있다.
• 렌더링 중에 set function을 호출하는 것은 현재 렌더링 Component 내에서만 허용하며, React는 output을 삭제하고, 즉시 새로운 state 렌더링 작업을 함
• Strict Mode에서 React는 우발적인 실수를 찾기 위해 updater function을 두 번 호출하며, 이는 production 환경에서는 영향을 주지 않음

- 끝 -