handleReset() {
// this.setState({searchKeyword: "" })
this.setState(() => {
return { searchKeyword: ""}
}, ()=> {
console.log("TODO: handleReset", this.state.searchKeyword);
})
}
setState()는 비동기로 동작한다.
이런 방식으로 this.setState를 사용하면, 상태 업데이트가 완료된 후 특정 작업을 수행할 수 있다. 이는 React에서 상태 업데이트가 비동기적으로 이루어지기 때문에 유용하다. 상태 업데이트가 즉시 반영되지 않을 수 있으므로, 업데이트가 완료된 이후에 특정 로직을 실행해야 할 때 콜백 함수를 사용한다.
handleReset() {
this.setState({searchKeyword: "" })
console.log("TODO: handleReset", this.state.searchKeyword);
}
이런식으로 동작을 설정하면 값이 비어지고, 빈 문자열이 콘솔에 출력될 것 같지만...
비동기로 동작하기때문에 Reset 버튼을 누를 대의 그 문자값이 그대로 콘솔에 출력된다.
'🪁react > react 실습' 카테고리의 다른 글
| 화살표 함수에서 반환할 JSX 요소가 있다면, return 문과 같은 줄에 배치 (0) | 2024.01.03 |
|---|---|
| 키워드 제거 시, 검색폼 내용도 같이 지우기[제출 키워드를 false로] (0) | 2024.01.03 |
| 리액트 실행, useState, 리액트 검색폼 구현해보기,리액트 조건부 렌더링 (0) | 2024.01.02 |
| react의 특성1[리액티브 : 특정 값에 의존해 자동으로 반응하는 것] (0) | 2023.12.30 |
| js 검색기능(3) (0) | 2023.12.27 |