[React] 비동기 SetState 동기식 처리

state를 업데이트 하다보면

setState로 값을 변경하고 console.log를 찍어보면 변경되기 전의 값이 출력되는 경우가 있다.

 

setState는 비동기이기 때문에 이부분을 고려해야한다.

해결하는 방법은 무엇이 있을까?

 

[Class component]

아래는 삭제 버튼을 누르면 searchKeyword가 초기화 되는 코드의 일부분이다.

handleRemove() {
    this.setState({
      searchKeyword: "", // serchKeyword 초기화
    });

    console.log(this.state.searchKeyword, "remove"); // 초기화 되기 전의 값이 출력됨
  }

state업데이트가 잘 되었는지 console.log를 찍었는데 이전 값이 나온다.

 

- setState의 callback함수로 해결

handleRemove() {
    this.setState({ searchKeyword: "" }, () => {
        console.log("remove", this.state.searchKeyword); // 변경된 ""로 출력됨
      });
  }
  
// 함수 return시 이런식으로도 아래와 같이 사용가능
handleRemove() {
    this.setState(
    () => {
      return { searchKeyword: "" };
      },
      () => {
        console.log("remove", this.state.searchKeyword);
      }
    );
  }

 

[Functional component]

const handleRemove = (e) => {
 setSearchKeyword("");
 console.log(setSearchKeyword) // 변경되기 전 값 출력
}

- useEffect Hook를 사용하여 해결

const handleRemove = (e) => {
 setSearchKeyword("")
}

useEffect(() => {
  console.log(searchKeyword);
}, [searchKeyword]);

useEffect의 두 번째 인자로 해당state값을 넣어주어 searchKeyword가 변경되었을 때

console.log가 출력되게 한다.