문제 원인

훅 함수에 배열을 사용하면서 state가 업데이트되는것처럼 보이지만
컴포넌트에서 읽어올 때 변경 사항이 반영되지 않는 문제가 발생했다.

  const [templateList, setTemplateList] = useState([
    "a",
    "b",
    "c",
    "d",
    "e",
  ]);

  const onNextTemplate = () => {
    setTemplateList((prev) => {
      const firstTemplate = prev.shift();
      if (typeof firstTemplate !== "undefined") {
        prev.push(firstTemplate);
      } else {
        return prev;
      }
      console.log([...prev]);
      return prev;
    });
  };

문제 분석

원인은 return될 때 배열의 복사 문제가 일어난 것 같다고 판단했다.

문제 해결

prev를 바로 return하지 않고, 배열을 분해한 다음에 다시 새로운 배열을 return하는 해결되었다.

  return prev   =>   return [...prev]