인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

Editor 컴포넌트에서 useReducer보다 useState를 활용한 이유는 상태 변경 액션의 유형이 단 하나("값을 수정한다")밖에 없기 때문입니다.

강의에서 말씀드렸듯 useReducer의 본 목적은 복잡하거나 길어지는 상태관리 로직을 컴포넌트 내부로부터 외부로 분리하기 위함인데요, 이때 보통 상태관리 로직이 복잡하거나 길어지려면 상태를 변화시키는 액션의 유형이 여러가지여야 합니다.

예를 들어 useReducer를 활용한 App 컴포넌트의 경우 data State에 적용되는 상태 변화 액션의 유형이 CREATE, UPDATE, DELETE 등으로 매우 다양합니다. 그러나 Editor 컴포넌트의 경우 값을 변경시키는 단 하나의 액션 유형만 존재하기 때문에 굳이 useReducer를 사용할 필요가 없을 것 같다고 생각했습니다 😃

결론적으로 드리고 싶은 말씀은 useReducer는 "상태가 여러개일때 적용한다" 라는 느낌보다는 "상태를 관리하는 로직이 너무 길어지고 복잡해질 것 같다!" 라고 할 때 사용한다고 이해하시면 되겠습니다.

안녕하세요, 인프런 AI 인턴입니다. hhj2573님.

React에서 상태 관리 방법을 선택할 때, useState와 useReducer 중 어떤 것을 사용할지 고민하고 계신 것 같습니다. 두 가지 훅 모두 상태를 관리할 수 있지만, 각 방식은 특정한 상황에 더 잘 맞습니다. 질문하신 내용에 대해 간단히 설명드리겠습니다.

useState vs useReducer

1. useState:

   • 간단한 상태 로직을 관리할 때 적합합니다.
     
   • 상태의 수가 많지 않고, 상태 변경 로직이 단순할 때 주로 사용됩니다.
     
   • setState를 통해 직접 상태를 업데이트하며, 코드가 간결합니다.
     

2. useReducer:

   • 복잡한 상태 관리 로직이나 상태 전환이 많고 다양할 때 주로 사용됩니다.
     
   • action 객체를 통해 상태를 변화시키기 때문에 보다 구조화된 방식으로 상태 관리가 가능합니다.
     
   • state와 dispatch를 통해 상태를 업데이트하며, 상태 변경 로직을 하나의 reducer 함수로 모아서 관리합니다.
     

왜 useState를 선택했는가?

• 단순성: 해당 컴포넌트에서 관리해야 하는 상태가 3개이고, 복잡한 상태 변경 로직이 없으므로 useState로 관리하기에 충분히 적합할 수 있습니다.
  
• 가독성: 코드의 복잡성을 줄이고 가독성을 높일 수 있습니다. 복잡한 로직이 없다면 굳이 useReducer를 사용하여 상태 관리 구조를 복잡하게 만들 이유가 없습니다.
  

유사한 질문 참고

더 불확실한 점이나 다른 유사한 질문 및 답변들이 궁금하시다면, 아래의 링크들을 참조해 보실 수 있습니다. 유사한 상황에서 상태 관리를 어떻게 하는지에 대한 추가적인 답변과 설명이 포함되어 있습니다:

• 질문드립니다: useReducer와 useState의 사용에 관한 실제 설명과 예시.
  
• 컴포넌트 구조 질문: 상태 관리에 대한 질문과 ContextAPI를 활용한 내용.
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.