Recoil, state를 전역 관리

프로젝트를 진행이 막바지로 접어들면서 새로운 기능보다는 리팩토링에 초점을 맞추며 개발하고 있다.

버그를 찾아나서는 중에 헤더 아이콘 토글 문제를 발견했다.
헤더는 드랍다운 형식으로 클릭시 true, false로 열고 닫을 수 있다.

// 드랍다운
const [dropDownClick, setDropDownClick] = useState(false);

const dropDownHandler = () => {
    if (dropDownClick === false) {
      setDropDownClick(true);
    } else {
      setDropDownClick(false);
    }
  };

하지만, 아이콘을 클릭 후 다른 페이지로 넘어가면 토글이 그대로 남아있는 것이었다.

메인에서 아이콘 클릭 후 마이페이지 이동

마이페이지 이동 후에도 토글이 그대로 남아있음

고민과 해결 🤓

마이페이지를 누를 때 토글 state를 false로 바꿔줘도 되지만, 다른 페이지도 고려해 전역적으로 관리가 필요했다.

Recoil을 이용해 전역 저장소를 만들어 준다.

import { atom } from 'recoil';

const headerToggle = atom({
  key: 'headerToggle',
  default: false,
});

export default headerToggle;

해당 컴포넌트에서 useRecoilState로 저장소 호출.
최상위 div에서 onClick을 실행시켜주면 빈공간을 누르면 토글은 사라지게 된다.

import headerToggle from '../../recoil/headerToggleState';

// recoil 전역에서 가져오기
const [dropDownClick, setDropDownClick] = useRecoilState(headerToggle);

return (
  <FullScreen onClick={() => setDropDownClick(false)}>
    <HomeBanner />
    <MainBackground>