useState vs. useReducer (feat. lazy Initialization)

상태관리가 필요한 이유?

그 전에... 상태는 뭐지?

• 리액트에서 상태란, 컴포넌트 내부에서 변경될 수 있는 동적이고 렌더링에 영향을 주는 값이다.

• React는 JSX 문법으로 이루어진 코드로, 가상 DOM(Virtual DOM)을 생성하여 실제 DOM에 변경 사항을 반영한다.
• 이때 가상 DOM은 상태 값 변화에 따라 컴포넌트가 재구성되고 리렌더링이 이뤄진다. 따라서 불필요한 렌더링을 줄이기 위해 적절한 상태관리가 필요한 것이다.

useState

const [state, setState] = useState(initialState)

🧤 initialState : 초기 값

• 초기 값을 useState 함수에 인자로 넣어주면 state와 setState 두 가지 요소를 배열 형태로 리턴해준다.

🧤 state(첫 번째 원소) : 현재 상태
🧤 setState(두 번째 원소) : Setter 함수

• [something, setSomething]의 형식으로 구성되어 있다.
• setter 함수는 파라미터로 전달 받은 값을 최신 상태로 설정해준다.

예시 코드

const Counter = () => {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  const decrement = () => setCount((currentCount) => currentCount - 1);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  )
}

🌱 useState를 언제 사용하지?

• 상태 값이 불규칙하게 변할 때 사용한다.
• 단순한 값(number, boolean 등)에 대한 상태관리를 할 때 사용한다.

useReducer

useReducer은 useState와 비슷한 형태를 띠지만 좀 더 복잡한 상태 값을 시나리오에 따라 관리할 수 있다.

const [state, dispatch] = useReducer(reducer, initialArg, init?)
                                                                                 

반환값

useState와 동일하게 길이가 2인 배열이다.

🧤 state

• 현재 useReducer가 가지고 있는 값을 의미한다.

🧤 dispatcher

• state를 업데이트하는 함수.
• useState의 setState는 단순히 값을 넘겨주지만 dispatcher의 경우 action을 넘겨준다는 점에서 차이가 있다.
  - action은 state를 변경할 수 있는 액션을 의미한다.

인자

useState의 인수와 달리 2개에서 3개의 인수를 필요로 한다.

🧤 reducer

• useReducer의 기본 action을 정의하는 함수

🧤 inititialState

• useState의 초깃값을 의미한다.

🧤 init

• useState의 인수로 함수를 넘겨줄 때처럼 초깃값을 지연 생성하고 싶을 때 사용하는 함수이다.
• 필수값이 아니며, init에 넘겨주는 함수가 존재하는 경우 useState와 동일하게 게으른 초기화가 일어나게 된다.

예시 코드

const reducer = (state, action) => {
  switch (action) {
    case 'increment':
      return state + 1
    case 'decrement':
      return state - 1
  }
}

function App() {
  const [count, dispatch] = useReducer(reducer, 0)

  return (
    <div>
      Count: {count}
      <button onClick={() => dispatch('increment')}>Increment</button>
      <button onClick={() => dispatch('decrement')}>Decrement</button>
    </div>
  )
}

🌱 useReducer를 언제 사용하는 게 좋을까?

• 위의 예시 코드를 보면 알 수 있듯이, useReducer은 dispatcher를 통해 정해진 시나리오를 제한적으로 두고 이에 대한 변경을 빠르게 확인할 수 있게끔 한다.
• 따라서 number나 boolean과 같이 간단한 값에 대한 상태 관리는 useState로 충분하지만 state 하나가 가져야 할 값이 복잡하고, 이를 수정해야 할 경우의 수가 많아지는 경우 useReducer로 관리하는 게 효율적일 수 있다.

---

Lazy Initialization

useState에 변수 대신 함수를 넘기는 것을 게으른 초기화(lazy Initialization) 라고 한다.

• 위의 게으른 초기화 함수는 state가 처음 만들어질 때만 사용되며, 만약 이후에 리렌더링이 발생된다면 이 함수의 실행은 무시된다.
• 추가로, useState(함수())와 같이 호출하는 방식으로 return 값으로 초기값을 받아오는 경우에는 컴포넌트가 리렌더링 될 때마다 실행된다고 한다.
  -> 항상 바쁘게 랜더링이 일어나는 게 아니라 필요할 때 한 번 호출되는 것이기 때문에 '게으른' 초기화가 된 것이다!

🌱 게으른 초기화가 왜 필요하지?

• 함수 컴포넌트가 렌더링되는 경우, 그 안에 있는 코드들도 다 렌더링이 된다.
• 렌더링이 될 때마다 함수 내부의 변수나 인자 값들이 모두 새로 만들어진다. 그렇기 때문에 초기값이 많은 비용을 차지하는 경우 매번 렌더링되게 하지 않고 함수 호출을 첫 렌더링 때만 하게 하면서 메모리 낭비를 줄일 수 있다.

  결국 게으른 초기화는 성능 최적화 작업이다!

🌱 언제 게으른 초기화를 할까?

• 초기값이 간단한 값인 경우 함수가 게으른 초기화를 하게 되면, 초기화를 위해 한 번 호출될 때 함수를 만드는 비용이 존재하며 이 비용은 간단한 값을 넘기거나 변수를 생성하는 비용보다 크게 발생하며, 과한 최적화가 된다.
  
• 따라서 게으른 초기화는
  1. localStorage나 sessionStorage에 대한 접근
  2. map, filter, find와 같은 배열에 대한 접근
  3. 초깃값 계산을 위해 함수 호출이 필요한 경우
  과 같이 무거운 연산이나 실행 비용이 많이 드는 경우 사용하는 것이 좋다.

출처
https://velog.io/@dee0518/React-useReducer
https://yceffort.kr/2020/10/IIFE-on-use-state-of-react
https://jihyun-hamster.tistory.com/128
https://velog.io/@hoyaho/%EC%A7%80%EC%97%B0-%EC%B4%88%EA%B8%B0%ED%99%94