[React] state 변경함수 사용할 때 주의점 : async

js 는 일반적인 코드를 작성하면 synchronous(동기방식) 하게 처리된다

-> 코드 작성한 윗줄부터 차례로 코드가 실행되는 것

 

하지만 어떤 함수들을 사용하면 asynchronous(비동기적) 하게 코드 실행이 가능하다.

예를 들어 ajax, 이벤트리스너, setTimeout 이런 함수들이다.

이런 함수들은 처리시간이 오래 걸린다.

그래서 ajax 요청하는 코드들은 순차적으로 실행되지 않고 다른 코드가 완료되면 실행된다.

---

React 의 setState 함수 특징

 

리액트로 state를 만들때

function App(){
  let [name, setName] = useState('kim')
}

이런식으로 하는데, setName 이라는 state 변경함수들은 전부 asynchronous(비동기적) 으로 처리가 된다.

이런 state 변경 함수가 오래걸리면 제쳐두고, 밑에있는 다른 코드부터 실행한다.

 

이런 특성 때문에 state A 를 변경하고 state B 를 변경하는 코드를 작성할 때에 가끔 문제가 발생한다.

그래서 이런걸 동기적으로, 순차적으로 실행하고 싶을 때 사용할 수 있는 방법은 useEffect 이다.

 

useEffect 는 컴포넌트가 렌더링되거나 재렌더링 될 때 실행되는 함수다.

이 뒤에 [ ] 안에 state 를 넣으면

state 가 변경되면 이 코드를 실행해달라 이런 뜻으로 쓸 수도 있다.

useEffect(()=>{
    
 }, [state_A])

state_A가 변경되고나서 다른 코드를 실행해달라 -  처럼 순차적으로 코드를 실행할 수 있다.