[BUG] recoil 전역변수가 update 되지 않는 문제

[WHO-A-U]

atom 전역변수가 update 되지 않는 문제

증상

다음과 같이 전역변수 query 의 minimum_instagram_hashtag 만 초기화가 진행되고 minimum_kakao_rating , minimum_naver_rating 는 초기화가 이루어 지지 않음

log

• KakaoSlider
• NaverSlider
• InstaSlider 위 세 파일의 useEffect 에 log 를 찍어 확인해봄

log 예시

useEffect(() => {
console.log('KakaoSlider useEffect start');
console.log(query);
console.log(curValue);
console.log('KakaoSlider useEffect end');
setQuery({
...query,
minimum_kakao_rating: curValue,
});
}, []);

기대하는 작동방식은

1. kakaoSlider 에서 setQuery 를 이용하여 값 minimum_kakao_rating 전역상태 update
2. NaverSlider 에서 kakaoSlider 에서 update 해놓은 Query 를 다시 가져옴
3. query 에 minimum_naver_rating 값만 다시 overwritting 하여 다시 update

다음과 같음 대략 그림으로 나타내면

하지만 실제 돌아가는 방식은 setQuery 함수가 useEffect 가 끝나고 다음 callstack 에서 실행되므로 다음과 같다 실제 6번 의 InstaSlider 가 update 한게 최종적인 상태로 남음

[WHO-A-U]

일단 각 Slider 의 useEffect 는 모두 주석처리 하고 query 의 기본값 자체를 수정하는방식으로 함

export const queryState = atom({
  key: 'query',
  default: {
    gu: 1,
    dong: 1,
    sub_category: 1,
    place_name: '',
    minimum_kakao_rating: 3,
    minimum_naver_rating: 3,
    minimum_instagram_hashtag: 10000,
  },
});

[WHO-A-U]

89 3f6a56c4bdcd07c24105ed00c06fe7ab96ac0e27

별점을 필터링할수 있는 slider 가 기본으로 닫혀있게 제공되게끔 UI 를 바꾸면서 사용자가 헷갈릴수 있기 때문에 다시 null 로 수정

export const queryState = atom({
  key: 'query',
  default: {
    gu: 1,
    dong: 1,
    sub_category: 1,
    place_name: '',
    minimum_kakao_rating: null,
    minimum_naver_rating: null,
    minimum_instagram_hashtag: null,
  },
});