1. 비동기 객체이므로 일어나는 일

리엑트를 처음 접하고 개발할 다들 한번쯤 경험했을 일이다.
setState를 실행하고 바로 변경된 값을 console.log를 찍어보면 변경 전에 값이 나온다 그런대 화면상에 는 바뀐값이 나온다?????

초보 리엑트 개발자라면(본인포함) 이러한 경우를 1번은 겪어 봤을 것이라고 생각합니다.
이런 경우가 생기는 이유를 알기위해선 Javascript가 어떤식으로 코드를 읽어오는지 알아야합니다.
왜냐하면 setState는 "비동기" 객체이기 때문입니다.
(비동기 객체는 ajax, callback, setTimeout 등이 있다.)
js가 동작하기 위해선 콜스택, 매새지큐, 이벤트 루프에 대해서 알아야합니다.

• 콜스택 : "처음 코드를 읽어 올 때" 동기식 으로 작동되는 코드들이 저장되어있는 공간입니다. (스택이므로 후입선출)
• 매새지 큐 : 비동기 객체 들이 저장되어있는 공간입니다. (큐이므로 선입선출)
• 이벤트 루프 : 콜스택이 비워진 다음(중요!) 즉! "동기식으로 작동되는 코드들이 모두 빠져나간뒤에"
  매새지 큐에 있는 비동기 객체들을 콜스택으로 보내는 역할을 합니다

즉 동기식으로 처리하는 코드들이 모두 빠져나간뒤에야 비동기 객체들이 작동을 하게됩니다

때문에 setState또한 비동기객체(callback)이기 때문에 console.log()가 먼저 찍히고 그다음 setState가 실행되며 그다음 화면이 리렌더링 되어 변경된 state의 값이 표시가 되어집니다.

때문에 다음과같은 코드로 변경 후에 값을 확인해 볼수 있습니다

setState((prev)=>{
  	// prev는 초기값 혹은 변경되기전에 값을 인자로 받게된다.
	console.log(prev+1)
  	return prev+1
})

react.js useState 공식문서 링크
또한 object나 Array를 setState를 할땐
원본의 불변성을 유지한채로 복재하는 방법 (PreadOperator, 불변함수(filter, concat, map)등을 활용해야한다, string은 유사배열로 불변하기때문에 그냥 set하면된다.)

// object
const [object, setObject] = useState({});
setObject(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});
//array
const [array, setArray] = useState([]);
setArray(prevState => {

  return [...prevState, ...updatedValues];
});

추가로 매번 setState할때마다 concole.log를 찍기 귀찮을 경우 다음과 같은 방법을 쓰자

useEffect(()=>{
	console.log(state)
},[state])

유즈이팩트의 뎁스의 값이 바뀔때마다 1번째 인자로 할당한 함수를 실행하므로 스테이트가 변경됨에 따라 자동으로 변경된 값을 확실히 알 수있다.

setState(prev=>prev)

그렇다면 setState(prev=>prev)는 도대체 setState가 어떤식으로 생겨먹었길래 사용할 수 있는 걸까?
내부 코드를 살펴보자

나중에 알아보자 (공부중)