문제

클릭한 이모티콘의 boolean값을 배열에 저장하니 뒤로가기 했을때 날라감 → 쿼리스트링 써야할듯? → useSearchParams훅 사용 → state로 관리하던 분류값 정리함

const useEmoSelect = () => {
  const [emoSelect, setEmoSelect] = useState<boolean[]>(Array(6).fill(false));
  const [emoNum, setEmoNum] = useState("1,2,3,4,5,6");

  const clickEmojiHandler = (num: number): void => {
    const newEmoSelect = [...emoSelect];
    newEmoSelect[num] = !newEmoSelect[num];
    setEmoSelect(newEmoSelect);

    const newEmoNum = newEmoSelect
      .map((selected, index) => (selected ? index + 1 : null))
      .filter((x) => x !== null)
      .join(",");
    setEmoNum(newEmoNum);
  };

  if (!emoNum) {
    setEmoNum("1,2,3,4,5,6");
  }
  return { clickEmojiHandler, emoNum };
};

export default useEmoSelect;

const [searchParams, setSearchParams] = useSearchParams();
const paramSort = searchParams.get("sort");
const paramEmo = searchParams.get("emo");

but!

state로 관리하던 클릭이모티콘?은 뒤로가기시 리셋됨…

그럼 쿼리 스트링의 값을 가져와서 state의 초기값으로 넣으면 되겠다 생각함

const useEmoSelect = (paramEmo: string | null) => {
  const [emoSelect, setEmoSelect] = useState<boolean[]>(Array(6).fill(false));

  if (!paramEmo) {
    paramEmo = "1,2,3,4,5,6";
  }
  const changeEmo = () => {
    if (paramEmo) {
      const copySelect = Array(6).fill(false);
      paramEmo.split(",").map((item) => copySelect.splice(Number(item) - 1, 1, true));
      console.log(copySelect);
      setEmoSelect(copySelect);
    }
  };

  useEffect(() => {
    changeEmo();
  }, [paramEmo]);

  const [emoNum, setEmoNum] = useState(paramEmo);

  const clickEmojiHandler = (num: number): void => {
    const newEmoSelect = [...emoSelect];
    newEmoSelect[num] = !newEmoSelect[num];
    setEmoSelect(newEmoSelect);

    const newEmoNum = newEmoSelect
      .map((selected, index) => (selected ? index + 1 : null))
      .filter((x) => x !== null)
      .join(",");
    setEmoNum(newEmoNum);
  };

  if (!emoNum) {
    setEmoNum("1,2,3,4,5,6");
  }
  return { clickEmojiHandler, emoNum, emoSelect };
};

export default useEmoSelect;

렌더링이 최소 4번에서 7번까지 일어남..

백엔드에게 초기값을 안보내도 이모티콘이 모두 선택된 상태였으면 좋겠다고 부탁함

해결

const useEmoSelect = (paramEmo: string | null) => {
  const [emoSelect, setEmoSelect] = useState<boolean[]>(Array(6).fill(false));

  const changeEmo = () => {
    if (paramEmo) {
      const copySelect = Array(6).fill(false);
      paramEmo
        .split(",")
        .map((item) => copySelect.splice(Number(item) - 1, 1, true));
      setEmoSelect(copySelect);
    }
  };

  useEffect(() => {
    changeEmo();
  }, [paramEmo]);

  const [emoNum, setEmoNum] = useState(paramEmo);

  const clickEmojiHandler = (num: number): void => {
    const newEmoSelect = [...emoSelect];
    newEmoSelect[num] = !newEmoSelect[num];
    setEmoSelect(newEmoSelect);

    const newEmoNum = newEmoSelect
      .map((selected, index) => (selected ? index + 1 : null))
      .filter((x) => x !== null)
      .join(",");
    setEmoNum(newEmoNum);
  };

  return { clickEmojiHandler, emoNum, emoSelect };
};