문제해결_ 리코일을 처음 사용해보니…( 결국엔 로컬 스토리지2 )

• 홈 페이지에서 메인 페이지로 들어가면 현재 추천 지역의 그래프가 뜨도록 설정했다.
• 프롭스로 지역만 넘겨주면 된다고 생각했다.

 

 

const MainView = () => {
  const defaultSelectedValue = useRecoilValue(currentSpotAtom);
  const [defaultLocationName, defaultDustLevel] = defaultSelectedValue;
  // 지역 필터 선택
  const [selectedValue, setSelectedValue] = useState(defaultLocationName);

  // 데이터 피커 기록텝에서만 보이기
  const [selectedTab, setSelectedTab] = useState('1');

  useEffect(() => {
    // 컴포넌트가 마운트될 때 현재 추천지역 Recoil 상태를 로컬 상태의 초기값으로 설정
    setSelectedValue(defaultLocationName);
  }, [defaultLocationName]);

  // 지역 필터
  const onHandleChange = value => {
    // console.log(`selected ${value}`);
    setSelectedValue(value); // 로컬 상태 업데이트
  };

  // 차트, 기록 텝
  const onTabChange = key => {
    setSelectedTab(key);
  };

  //텝 메뉴
  // const [size, setSize] = useState('large');
  // const onChange = e => {
  //   setSize(e.target.value);
  // };
  return (
    <Container>
      <Select
        showSearch
        placeholder='지역을 선택해주세요'
        size={'large'}
        value={selectedValue} // Recoil 상태를 사용하여 현재 선택된 값을 설정

const MainChart = ({ selectedRegion }) => {
  const regionData = useRecoilValue(
    regionAtoms[selectedRegion] || goseongPastAtom
  );

  console.log('Selected Region: ', selectedRegion);
  console.log('Selected Atom: ', regionAtoms[selectedRegion]);

  // nivo 차트에 전달할 데이터 포맷으로 변환
  const mainChartData = regionData.map(item => ({
    x: item.msurDt,
    y: parseInt(item.pm10Value, 10) || 0, // pm10Value를 숫자로 변환, 유효하지 않은 값은 0으로 처리
  }));

  // 차트에 데이터 전달
  const data = [
    {
      id: convertLocationName[selectedRegion] || 'default',
      data: mainChartData,
    },
  ];

• 메인페이지에서 진입을 하면 지역 필터를 해도 과거 데이터가 잘 뜨는데, 메인페이지에서 리프레쉬 후에는 차트의 데이터가 아톰의 초기값만 가져오고 있었다.

 

 

 

• 과거 미세먼지 평균 데이터는 날짜를 확인해서 하루 한번 로컬 스토리지에 저장 하도록 되어 있었는데, 해당 데이터를 로컬스토리지에서도 리코일에 가져올수 있도록 한다. 추측은 그건 진입 페이지(home)에서 이루어지는데 차트가 보이는 메인 페이지에서는 해당 로직이 없음..다른 페이지에서 리프레쉬 하게 되면 데이터가 초기화 된다. 홈 화면을 무조건 먼저 진입하게 해서 홈 화면에서만 데이터를 받아오고 로컬 스토리지 및 리코일 atom에 저장했는데, 리프레쉬시 초기화를 고려를 못한것이 실수.
• 여러가지 방법이 있는데,

→ Recoil을 사용하다가 전역상태가 새로고침 하면 초기화되는 현상이 발생한다. 구글링을 해보니 나랑 똑같은 문제를 겪는 사람들이 많았고, 생각보다 쉽게 해결방법을 얻을 수 있었다. 바로 Recoil-persist 라이브러리를 사용하면 된다. Recoil-persist를 사용하면 이전처럼 새로고침을 해도 recoil state가 날아가지고 않고 sessionStorage 또는 localStorage에 보관된다. 아무런 설정도 해주지 않으면 key는 "recoil-persist", 저장소는 localStorage에 기본적으로 저장된다.

• 리코일의 경우 새로고침하면 데이터가 사라지는걸 잊었다...