[React.js] useReducer, useState은 언제 사용 하는가?

React 함수형 컴포넌트를 사용하면서 가장 많이 사용되는 useState가 있다 

useReducer 등 여러 함수가 있는데, 차이점과 사용 용도를 공부하여 정리해 보았다.

 

state를 관리하기 위한 함수 -  useState, useReducer

대부분의 사람들이 useSate는 사용할 줄 안다. 하지만 useReducer은 무엇인가 ??????? 차이점은???

인터넷을 찾아보면 useState 와 useReducer의 사용방법 등 예시가 많이 널려있다.(모든 블로그에 사용 방법이 친절히 설명되어있어 해당 블로그에서는 스킵한다.)

그래서 언제 useSate를 사용하고 언제 useReducer를 사용한다는 말인가?

글쓴이는 useSate와 useReducer를 언제 사용하는지 필자의 온전한 의견으로 설명하고자 한다 (정답은 없지만 경험상 활용을 언제 하는지 좋을지 정리해 본다)

useState는 상태 값이 불규칙하게 변할 때 사용한다.

예를 들어 (Counter 예시는 너무 많아 다른 예시로 간략히 만들어 보았다),

const [testDate, setTestData] = useState(null);

이라고 선언하고, 내가 API에서 받은 데이터 , 즉 규칙성이 없고 어떻게 변할지 모를 데이터를 넣어 줄 때 사용한다.

다른 예시로는 사용자가 입력하는 값을 받을 때 사용하거나 예측 불가한 데이터를 주로 넣어준다.

 

그 반대로 useReducer은 규칙성이 있는 데이터를 관리한다.

Counter 예시와 같이 어떤 데이터를 1개 증가, 1개 감소와 같은 상황이던가, 

API status를 관리하는 state라던가 (stat 500,401, 404 등) 이와 같이 예측 가능한 데이터를 관리할 때 사용하면 유용하다.

글쓴이는 useState 활용 빈도가 훨씬 높기 때문에 사실상 정확한 정답은 없다.

계속 인터넷을 찾아보다가 여러 이유가 있지만 글쓴이의 경력에서 묻어 나온 의견을 적어 보았다.

 

도움이 되었다면 댓글 한 번만 부탁드립니다 ^_^ 혹시 정보가 잘못되었다면 바로 알려주시길 바랍니다 저도 공부하면서 정리한 글입니다.