react state update & call api in a method with new state

* 상태를 업데이트 했는데 이전 상태값으로 요청이 가는 경우

 

https://muna76.tistory.com/351

setState를 했는데 바로 직전 상태값이 나와요

의 버전 2라고 할 수 있다!

 

 

 

리액트에서는 setState를 한다고 해서 상태값이 바로 변경되는것은 아니다.

크게 3가지 단계로 업데이트가 되는데, 
1. 트리거
2. 렌더링
3. 커밋

 

렌더링 결과가 이전과 같으면 React는 DOM을 건드리지 않는다

 

이전 포스팅에서는 useEffect를 사용해서 비동기적으로 업데이트되는 상태값을 동기적으로 실행 되는것처럼 보이게 하는! 방법을 사용했는데, 

 

이번에 적용한 것은 플래그를 활용한 방법이다. 

 

방법은 간단하다

 

const [pendingSearch, setPendingSearch] = useState(false);

 

  const onKeyDownEnter = (value) => {

    if (value != null) {

      searchForm.update('searchText', value, () => { // 상태 업데이트 커스텀 훅

        setPendingSearch(true);

      });

    }

  };

 

 

useEffect(() => {

    if (pendingSearch) { // 플래그로 조건을 걸어서 동기적으로 코드 실행
      handleSubmitSearch();

      setPendingSearch(false);

   } // 커스텀 훅

  }, [pendingSearch]);

 

 

1. 플래그값을 만들어서 이벤트 핸들러에서 -> 상태값 업데이트 후 플래그를 true로 바꿔준다(여기도 콜백함수로 넣어줬음)

2. 플래그값을 의존성으로 가지고 있고 상태 업데이트 후 실행하고싶은 useEffect 함수를 작성해준다. 플래그값이 변경시 작동하도록 하는 구조!

 

요약 : 플래그 하나 만들어서 상태값 업데이트 여부 확인용으로 써라.

 

이렇게 해주면 안전하게 상태값 업데이트 후 실행된다.

 

그냥 useEffect 의존성에 searchForm을 넣어줘도 되지만 그렇게 하면 검색 조건이 바뀔 때 마다 계속 호출이 가기때무네

그런 상황을 막아야하는 경우 플래그값으로 컨트롤해주면 된다.

 

끗