본문 바로가기

Client/Redux

React Hook(useState)와 Redux를 비교하여 이해하기

React Hook vs Redux

Redux를 사용하면서, 다소 헷갈리는 부분이 있었기 때문에 이를 정리하는 것이 필요하다고 생각했다. 

 

우선은 Redux가 왜 필요한지를 이해하는 것이 중요한데, 기존의 useState는 하나의 컴포넌트 안에서만 사용가능했다. 헌데 로그인이나, 혹은 다크모드(배경화면을 검은색으로 바꾸어 눈의 피로도를 줄이는)같은 다른 컴포넌트에서도 사용되는 상태변화를 관리하기 위해서는 useState의 대안이 필요했다. 그래서 나온게 Redux이다.

 

그렇기 때문에 useState와 Redux의 차이는 하나의 컴포넌트 안에서만 사용되는가 아니면, 다른 컴포넌트에서도 사용될 수 있는가만 다를 뿐 나머지는 똑같다고 생각한다.

 

useState에서 State를 만들어 상태변화를 저장하듯이, Redux에서는 Store를 만들어 이러한 상태변화를 저장한다. 또한 상태변화를 위해서 useState에서는 setState를 사용하는데, Redux에서는 Reducer를 사용한다. 그리고 setState 사용 시 어떠한 값으로 상태를 바꾸어주는가는 setState에 담기는 인자에 따라 달라지듯이, Redux에서는 Dispatch 안에 담긴 Payload에 따라 Reducer가 Store 안의 상태 값을 변경해준다.