출저
- React 공식문서
- 위코드 수업자료
setState()
setState(updater, [callback])
- setState() 는 React에게 컴포넌트 state 가 변경사항이 있다는것을 알리고 다시 render()을 하게 한다.
- 흔히, constructor에 state의 초기값을 지정하고 함수안에 setState 메서드를 이용하여 state를 바꿔 화면(UI)을 원하는대로 업데이트하거나 변경하게 한다.
setState() 비동기적 특성
setState()는 컴포넌트를 항상 즉각적으로 갱신하지는 않습니다. 오히려 여러 변경 사항과 함께 일괄적으로 갱신하거나, 나중으로 미룰 수도 있습니다. 이로 인하여 setState()를 호출하자마자 this.state에 접근하는 것이 잠재적인 문제가 될 수 있습니다. 그 대신에 componentDidUpdate 또는 setState의 콜백(setState(updater, callback))을 사용하세요. 둘 다 갱신이 적용된 뒤에 실행되는 것이 보장됩니다.
- 하지만, setState()를 사용한다고 해서 상태값이 즉각적으로 바뀌는 것은 아니라고 리액트 공식문서에서는 위와같이 설명하고 있다. 이를
setState의 비동기적 특성이라고 부르는데,상태를 바꿔주는 메서드가 즉각적으로 바꿔주지 않는다.라는 부분은 설명으로 들었을때 이해가 되지 않았지만 실제로 코드를 작성하며 겪으니 어떤 의미인지 이해하게 되었다.
코드에서 확인해 보기
아래는 위의 약관동의 항목에서 전체동의 기능을 구현하기 위한 코드.
- check0~3 까지 초기 상태값을 false 로 주었고, 각각의 항목이 클릭될때 상태값이 변하여 모두 체크가 되면 전체동의 체크박스의 상태도 변하도록 하였다.
- 여기서 문제가 마지막 항목이 체크되자마자 전체동의가 변하는 것이 아니었다. console.log를 찍어봐도 return 과 render 사이의 state값만 변했을뿐, 정작 위 함수의 state 값은 그대로 였다.
- 위의 문제가 바로 setState()의 비동기적 특성이다. 정작 setState안의 state는 한템포(?) 느리게 바뀐다.
해결방안
- 리액트 공식문서에서 말하듯, 콜백함수로 이 문제를 해결하려 하였으나 결과는 마찬가지 였다. 여기서 내가 간과한 것은 바로 this.state 부분.
- 다시 위의 코드를 보면 콜백함수는 불러줬지만, handleChecked()라는 함수를 처음 실행할때 선언한 check0~3 의 state값을 그래로 가져와 콜백함수에 써주었다. 그러니 콜백함수를 불러줘도 state가 업데이트 되지 않은 그대로였다.
콜백함수는 첫번째 인자의 비동기처리가 끝난 후에 실행된다.그래서 앞에 state가 업데이트 되고난 후 콜백함수에 this.state를 써주게 되면 현재 업데이트된 상태를 바로 확인하는 결과가 되는 것이다.- 아래는 콜백함수 안에서 다시 state값을 할당해 주었다. 비동기로 실행되지 않는 콜백함수안에서 state 값을 할당해주니, 내가 체크한 상태가 바로 적용되어 마지막 항목을 체크하자마자 전체항목이 동시에 체크되었다.
