setState의 비동기 이유

React를 사용하면서 setState가 왜 비동기였어야만 했을까 의문을 가졌었다.

앞에서 prev 인자를 사용하면 된다는 것을 확인했지만 setState를 사용한 후 바로 화면에 적용시키면 유기적으로 바뀌는 것을 확인하며 프로그래밍 하기 쉽지 않았을까

그런데 setState가 비동기여야만 하는 이유가 존재한다.

setState는 기본적으로 실행되면 render를 한번더 실행시키게 된다.

그렇다면 한 함수 안에 set 함수가 여러개 존재할 경우
하나 실행되면 render되고 다음 하나 실행되면 render 되고 set가 있을때마다 render가 실행되는 비효율이 발생하게 된다.

여기서 고민해봐야할게

const [first, setFirst] = React.useState()

=> useState의 data를 어떤 범위 정도로 선언할 것이냐인데

const [object, setObject] = React.useState({
        name: 'ts',
        age: 10,
        sex: 'm'
      });
      
const [name, setName] = React.useState();
const [age, setName] = React.useState();
const [sex, setName] = React.useState();

=> 다음처럼 실제로 state 에는 다양한 형식의 데이터들이 들어갈 수 있다.

여기서 setObject({...object, ~~~} 를 해도 상관은 없지만 만약 좀더 명확하게 setName 처럼 하나하나 분리한다고 한다면 set함수가 연속으로 여러개 들어가야할 가능성이 크다. (제로초님은 쪼개는걸 추천)

그러므로 react는 set함수의 반복으로 인한 render 함수의 실행을 알아서 안시킨다. 그렇기에 이 set함수들이 정상작동하기 위해서는 비동기 로직을 따라야하는것이다.

=> 또한 쉽게 생각하면 ...object를 하면 쉽게 생각할 수 있는데 ... 은 프론트의 효율을 생각하면 지양해야하는 문법이다.