앞서 useState()
와 useReducer()
에 대해서 배웠다.
그 둘은 state와 state를 관리해주는 hook이라는 점에서 비슷한 점이 많았다.
어떤 것을 사용해야하지는 헷갈릴 때가 많을 것이다.
useState()
를 반드시 사용해야하는 건 언제인지, useReducer()
를 사용해야 좋을 때는 언제인지 정리해보자.
항상 적용되는 규칙은 아니겠지만 적어도 언제 useReducer()
가 필요한지 알게 될 것이다.
예를 들어, 너무 많은 일들을 처리해야 하는 상황에 useState()
를 사용하면 너무 번거로울 때가 있다.
각각의 state들은 서로 독립적이기 때문에 같이 업데이트가 잘 안된다.
useState()
는 주요 state 관리 도구로써, 개별 state 및 데이터를 다루기 적합하다.
한 마디로 간단한 state에 적합하다. state의 업데이트가 쉽고, 그 종류가 얼마 안되는 경우에 적합하다.
따라서, state가 변경되는 경우가 다양하지 않다면, 특히 객체 형태의 state가 아니라면 적합하다.
그러나 만약 객체 형태의 state가 있거나 복잡한 state가 있다면, useReducer()
도 고려할 수 있다.
일반적으로 useReducer()
이 더 강력하기 때문에 여러 이점이 많다.
여기서 강력하다는 것은 reducerFn을 쓸 수 있다는 뜻이며, 복잡한 state 업데이트 로직을 사용할 수 있다는 것이다.
특히나 useReducer()
의 사용을 고려해야 하는 경우는 연관된 state 조각들로 구성된 state 관련 데이터를 다룰 경우다.
예를 들어 form input state가 있는 경우라면, 일반적으로 useReducer()
가 도움될 수 있다.
더 복잡한 state 업데이트가 있거나, 하나의 state를 변경하는 여러 다른 action을 보유한 경우라면 도움될 것이다.
여기에 반드시 정해진 규칙이 있는 것은 아니다.
언제나 그렇듯이 프로그래밍에는 항상 옳고 그름이 분명하지 않다
분명히 useReducer()
를 쓰는 것이 좋아보이는 경우라도, useState()
로 처리할 수 있다.
그러나 useReducer()
를 쓰는 것이 더 깔끔하고 간단할 수 있다.
반면, 절대적으로 항상 useReducer()
를 사용해야하는 것도 아니다.
예를 들어, 두 개의 서로 다른 값을 전환하기만 하는 단순한 state가 있는 경우라면, useReducer()
는 과할 수 있다.
이렇게 두 hook 간의 비교는 마치겠다.