프론트엔드/React

[TIL] 01-16 리액트 상태관리

반신욕좋아하는J 2023. 1. 16. 23:01
반응형

리액트의 상태 관리

useState, useReducer 등으로 상태를 관리하게된다.

여기서 이 상태관리와 리액트간에 state를 처리하는 과정을 이해해보자

state 상태 업데이트

상태를 업데이트 하기위해서 useState 를 사용한다면 set~ 이름의 useState 를 사용해서 업데이트 할것이다.

그런데 업데이트 바로 직후에 state 값이 반영될것같지만 그렇지않다.

즉각적으로 바뀌지않고 상태 업데이트 예약을 하게된다.

이같은 이유는 리액트는 잠재적으로 우선순위에 따라 처리를 하기때문이다.

사용자가 입력할수있는 공간이 있다면 사용자 입력을 응답하는것이 화면에 문자를 변경하는것보다 더 우선이되야되겠죠 이러한 이유 때문에 상태 변경에대한 업데이트를 지연시키게된다.

( 하지만 너무빨라서 거의 사람에 눈으로는 거의 즉각적으로 변하는것처럼 보인다.)

이후에 새로운상태가 활성화되면 리액트는 컴포넌트를 재평가하고 컴포넌트 함수를 재실행하게된다.

근데 여러번의 state 를 변경할수있기에 상태를 갱신할때는 함수형태를 이용하여 업데이트하는것이 좋다.

함수 형태를 사용해야 리액트가 최신상태를 사용하고 , 컴포넌트가 재 랜더링됬을때 그시점의 상태를 사용하지 않게된다.

반응형