요새 리액트적으로 사고하기 공식문서를 읽으며 자꾸 리액트화하려고 노력중...
자바스크립트에서도 비동기적 특성을 배웠는데, 리액트에서도 setState의 개념에 있어 비동기적 특성을 알아보았다.
setState는 비동기 함수
state를 업데이트 하려면 setState 함수를 사용해야 하는데, setState의 비동기적 특성 때문에 예상했던 것과 다른 결과값을 가져올 수 있다.
setState 실행된 직후에 변경된 상태값이 바로 적용된것이 아닌 답변을 기다려야하는 하나의 요청이다.
버튼을 클릭하면, 숫자가 하나씩 증가하는 것을 나타내는 식이다
//위 생략
state : {
number : 0
}
handleClick = () => {
const { number } = this.state
this.setState({
number: number+1
});
console.log(number);
}
render() {
const { handleClick } = this
const { number } = this.state
return (
<h1>Current Number : {number}</h1>
<button onClick={handleClick}</button>버튼을 클릭하여 Current Number에 나온 화면에 출력된 값을 보면 1로 업데이트된 것을 볼 수 있다. 하지만 console.log(number)를 함수식 안에서 찍어보면, 아직 업데이트가 안 된 0이 출력되는 것을 알 수 있다.
이처럼 화면값은 정상적으로 출력되었으나,
setState가 아직 처리가 안된 비동기적인 특징을 볼 수 있다.
그렇다면, 바로 업데이트 된 것을 확인할 수 있는 방법은?
동기적으로 실행하려면 ?
- callback 함수로 넘겨주기
handleClick = () => {
const { number } = this.state
this.setState({
number: number+1
}, ()=> {
console.log(number)};);
}아까는 setState 직후 console.log를 찍어주어 0의 값을 받았지만 지금은 this.setState 내에서 콜백함수로 바로 console.log를 호출시켜 1로 나오는 것을 볼 수 있다.
setState의 두 번째 인자로 넘겨주는 callback 함수는
해당 비동기처리가 다 끝나면 처리되는 함수이다.
넘버가 +1되고 끝나면, 업데이트 된 후에 callback을 호출하는 원리이다.
- callback 함수를 호출하지 않을 수도 있다
input field의 속성값 이용하기. 유저가 입력하는 값을 받는 handleChange를 만들어서, state 객체의 text = ''에 추가해준다.
handleClick = (e) => {
const { text } = this.state
const { value } = e.target
this.setState({
text : value
}, () => {
console.log(value);
)
}
handleClick 부분은 굳이 콜백함수를 사용해서 console.log를 찍어볼 필요가 없다. 유저가 입력한 값은 이벤트 객체가 가장 먼저 알고 있는데, 굳이 state에 들어가는 값을 console.log로 확인해볼 필요가 없는 것이다.
handleClick = (e) => {
const { text } = this.state
const { value } = e.target
this.setState({
text : value
});
console.log(value);
}이렇게 하면 동기적으로 console.log에 잘 출력되는 것을 볼 수 있다.
어차피 들어오는 값을 text에 저장하는 것이다!
프로젝트를 하면서 id와 pw의 유효성검사를 하는 함수식을 만드는데, 굳이 state에 key값을 추가하여 길어지는 코드, 가독성이 좋지 않은 코드를 만들었다. 더욱 직관적이게 리팩토링을 하고 다시 공부를 해보니 아직 리액트화가 덜 된듯하다!
불필요한 state값을 지정하지말자!
배우는 입장으로 자꾸 state값에 값을 넣어줘서 이용해야할 것같은 느낌이 들지만 이러한 비동기적 특징을 숙지하고 리액트적으로 사고하기!
