inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[리뉴얼] React로 NodeBird SNS 만들기

state의 무결성?

해결된 질문

300

Moa Kim

작성한 질문수 13

0

안녕하세요. 올려주신 리엑트쿼리 기반으로 연습하고 있습니다.

antd의 datepicker 이용해서 기간별로 포스트 불러오는걸 해보고 있습니다.

리액트의 state에 관해서 좀 기초적인?원초적인? 질문이 있습니다..

 

출발날짜의 상태와 변경함수

  const [ startDate, setStartDate ] = useState(moment().subtract(5, 'days'));
...
 
  const onChangeStartDate = (date, dateString) => {
    setStartDate(date);
};

 

날짜 변경후 적용버튼 눌러 서버 데이터 갱신하는 부분

  const onLoadTodos = () => {
    if(!startDate || !endDate){
      message.error('날짜를 선택해 주세요.', 0.5);
      return;
    }
    queryClient.invalidateQueries('orders');
}

 

데이터 가져오는 useQuery 부분

  const { status, isLoading, data: orders } = useQuery('orders',
  () => {
    console.log('useQuery');
    console.log(startDate);
    const from = startDate.toDate();
    const til = endDate.toDate();
    const params = {from:from, til:til, stat1: orderStatOpt};
    console.log(params);
    return loadTodosAPI(params)}
...

 

날짜를 변경setStartDate(date);한다음에 

<Button onClick={()=>{console.log('메롱', startDate)}}>날짜보기</Button>

이렇게 버튼으로 startDate값을 가져오는것과 

invalidateQueries('orders');  로  useQuery('orders',를 불러서 안에서 startDate를 가져오면 값이 다르게 나오는데..

원래 state의 값이 다르게 나오기도 하나요? 아니면 useQuery안에서 state가 다르게 작동한건지..

이상태에서 브라우저밖으로 커서 이동했다가 다시 들어오면(갱신시) state값이 동기화되긴 합니다..

redux express react nodejs Next.js

답변 1

1

제로초(조현영)

둘중에 버튼쪽이 맞는 날짜인가요?

0

Moa Kim

네 버튼쪽이 맞는날짜이고 

invalidateQueries('orders');

로 하면 날짜 뿐만아니라 다른 state들도 갱신전 예전값으로 출력됩니다.

 

그상태에서 날짜출력버튼 눌러보면 갱신된값이 나오는데

state가 갱신된값, 갱신되기 전값 두개가 공존해버립니다..

 

refetchInterval: 2000,

로 강제 리패칭하거나 브라우저 커서 나갔다 들어오면 제대로 갱신된 state값을 출력하고요.

 

0

제로초(조현영)

그 전까지의 state가 caching되어 있는 상태인 것 같습니다. invalidateQueries 말고 아예 강제로 업데이트하는 메서드를 쓰셔야 할것 같습니다.

0

Moa Kim

리액트 state문제가 아니라 리액트쿼리의 캐싱문제인거죠?

 

use쿼리 부분에서

const { status, isLoading, data: orders, refetch } = useQuery('orders',

이렇게 하고

refetch();

이렇게 사용할수 있네요. 감사합니다.

넥스트 버젼 질문

0

90

2

로그인시 401 Unauthorized 오류가 뜹니다

0

104

1

무한 스크롤 중 스크롤 튐 현상

0

192

1

특정 페이지 접근을 막고 싶을 때

0

116

2

createGlobalStyle의 위치와 영향범위

0

102

2

인라인 스타일 리렌더링 관련

0

97

2

vsc 에서 npm init 설치시 오류

0

157

2

nextjs 15버전 사용 가능할까요?

0

166

1

화면 새로고침 문의

0

129

1

RTK에서 draft, state 차이가 있나요?

0

160

2

Next 14 사용해도 될까요?

0

455

1

next, node 버전 / 폴더 구조 질문 드립니다.

0

359

1

url 오류 질문있습니다

0

214

1

ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out

0

391

1

sudo certbot --nginx 에러

0

1293

2

Minified React error 콘솔에러 (hydrate)

0

477

1

카카오 공유했을 때 이전에 작성했던 글이 나오는 버그

0

255

1

프론트서버 배포 후 EADDRINUSE에러 발생

0

337

1

npm run build 에러

0

525

1

front 서버 npm run build 중에 발생한 에러들

0

399

1

서버 실행하고 브라우저로 들어갔을때 404에러

0

350

2

css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.

0

290

1

팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.

0

249

2

해시태그 검색에서 throttle에 관해 질문있습니다.

0

206

1