1. ExternalStore

useState 를 제거하여 상태를 관리해보자

React에서는 일반적으로 어떤 변수의 값이 변화하였을 때(보통 유저의 조작으로 인한), UI에 해당 값을 반영하기 위해서는 useStore 라는 React에서 제공하는 hook을 사용해야 한다.

그렇지 않고, 일반적으로 변수를 정의한 후에 어떤 이벤트에 따라서 값을 변화시켰을 때는 UI에 해당 값을 반영할 수 없다. 변경된 값을 인식하지 못하기 때문에, 리렌더링되지 않기 때문이다.

React에서는 로컬 state, 그러니까 변수의 상태를 변경해서는 안되며, useState를 사용하기를 권장한다.

let count = 0;

export default function Counter() {
  const handleClick = () => {
    count += 1;
  };

  return (
    <div>
      <p>{count}</p>
      <button type='button' onClick={handleClick}>
        Increase
      </button>
    </div>
  );
}

---

변경된 상태의 값을 반영하여, 리렌더링 되도록 하기 위해서는 useState 를 사용한다.

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount((prev) => prev + 1);
  };

  return (
    <div>
      <p>{count}</p>
      <button type='button' onClick={handleClick}>
        Increase
      </button>
    </div>
  );
}

---

그러면 useState를 사용하지 않고 리렌더링을 강제하여 UI에 반영할 수 있는 방법이 있을까? useReducer를 사용하면 가능하다.

import { useReducer } from 'react';

let count = 0;

function increase() {
  count += 1;
}

export default function Counter() {
  const [ignored, forceUpdate] = useReducer((x) => x + 1, 0);

  const handleClick = () => {
    increase();
    forceUpdate();
  };

  return (
    <div>
      <p>{count}</p>
      <button type='button' onClick={handleClick}>
        Increase
      </button>
    </div>
  );
}

버튼을 클릭했을 때 증가한 count 의 화면에 잘 반영이 된다. 흥미로운 것은 useReducer 의 첫번째 인자로 전달된 함수에서 하고있는 역할은 의미가 없다는 것이다. +1을 해도 되고, 빈문자열을 더해도 된다. 즉, 여기서 useReducer 는 상태를 변경하는 훅으로써만 사용된다는 점이다.

참고로 useState 는 내부적으로 useReducer를 사용한다.

그러면 다시 한 번 코드를 고쳐보자.

import { useEffect, useReducer, useState } from 'react';

let count = 0;

function increase() {
  count += 1;
}

export default function Counter() {
  const [state, setState] = useState(0);

  const forceUpdate = () => {
    setState(state + 1);
  };

  useEffect(() => {
    console.log('test');
  });

  const handleClick = () => {
    increase();
    // 강제로 리렌더링
    forceUpdate();
  };

  return (
    <div>
      <p>{count}</p>
      <button type='button' onClick={handleClick}>
        Increase
      </button>
    </div>
  );
}

useReducer를 사용하지 않고, forceUpdate라는 함수 안에서 setState 를 사용하여 상태를 변경하여, 강제로 컴포넌트를 리렌더링 시킬수도 있다. 화면에 보이는 값은 increase 함수에서 처리한 증가된 변수의 값이다. forceUpdate라는 함수를 Hook 으로 만들면 아래와 같은 모양이 된다.

// hooks/useForceUpdate.ts
import { useState } from 'react';

export default function useForceUpdate() {
  const [state, setState] = useState({});

  const forceUpdate = () => {
    // useState 의 기본 값을 0이 아닌 object 로 잡고, setState 에서 object 를 spread
    // 연산자로 destructing 하면 새로운 객체가 되기 떄문에, 더 단순한 코드가 된다.
    // setState({ ...state });

    // 위의 코드 주석처리하고... 아래와 같이만 써줘도, 새로운 객체가 되어 상태를 업데이트하여,
    // 리렌더링 되도록 한다.
    setState({});
  };

  return forceUpdate;
}

// component/Counter.tsx
import useForceUpdate from '../hooks/useForceUpdate';

let count = 0;

function increase() {
  count += 1;
}

export default function Counter() {
  const forceUpdate = useForceUpdate();

  const handleClick = () => {
    increase();
    forceUpdate();
  };

  return (
    <div>
      <p>{count}</p>
      <button type='button' onClick={handleClick}>
        Increase
      </button>
    </div>
  );
}

---

이렇게 하면 Counter 컴포넌트에서는 더이상 useState 가 필요없어지고 컴포넌트 내부에서 가지고 있는 로컬 변수를 업데이트하여 UI에 반영할 수 있다.

그런데 여기서 문제는 훅으로 분리한 useReducer 의 함수 인자에서 계속 setState 함수를 통해서, 의미없는 값의 업데이트가 된다는 것이다. 여기서 useReducer 의 역할은 단순히 컴포넌트를 강제 리렌더링 하는 것이고, useReducer 의 함수 인자 값에서 변경하고 있는 상태는 특별한 일을 하는 것이 아니다.

useForceUpdate 를 리펙토링해보자.

// hooks/useForceUpdate.ts
import { useState, useCallback } from 'react';

export default function useForceUpdate() {
  const [, setState] = useState({});
  return useCallback(() => setState({}), []);
}

useCallback 을 사용하여, useCallback 의 첫번째 인자로 전달된 함수가 매번 새로운 함수가 아니도록 만들어주었다.

결과적으로, 위의 코드에서는 비지니스 로직과 UI에 대한 관심사의 분리가 이루어졌다.