드로이드나이츠에 참석했을때 react를 알게 되었는데 내가 직접 사용하게 될 줄이야. react를 공부하면서 백오피스 웹을 개발중이다.
선택목록 컴포넌트에서 값을 변경할 때마다 state에 저장하려고 한다.
값이 변할때마다 componentWillReceiveProps()가 호출된다.
아래 코드처럼 setState()를 하고나서 바로 console에서 state 값을 찍어봤더니 객체가 비어있다.
왜 setState()가 안되지?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | constructor(props) { super(props); this.state = { person: { name: '', sex: '' } } } componentWillReceiveProps(nextProps){ if(nextProps.person !== undefined) { this.setState({ person: nextProps.person }); } } | cs |
react는 대부분 비동기 방식으로 함수들이 실행되어서 수행완료 시점을 예측할 수 없다. 그래서 콜백을 받는 방식으로 구현해야 한다.
Promise 패턴을 추천받았다. (아직 공부중...)
결론은 setState()가 동작을 안한게 아니고, 비동기적으로 수행되니까 console을 출력할 시기에는 아직 수행이 안 된 상태인거였다. setState()가 완료된 시점에 무언가를 해야한다면 setState()의 두번째 인자로 콜백을 줄 수 있다.
()=>{ this.loadData() }
나의 경우, 두번째 인자에다가 api를 호출하는 함수를 넣어줬다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | constructor(props) { super(props); this.state = { person: { name: '', sex: '' } } } componentWillReceiveProps(nextProps){ if(nextProps.person !== undefined) { this.setState({ person: nextProps.person }, ()=>{ this.loadData() }); } } loadData() { //api call with state parameter } | cs |
해결!!!
이 부분때문에 하루를 날렸다..... 다음날 소스를 다 날리고 처음부터 다시 로그를 여러군데 찍어가며 시도하다가 setState()가 정확한 원인임을 알아냈다.