프론트엔드/ReactJS

Redux vs. React Context (0) - Introduction

hyongti 2021. 12. 8. 17:26

이 글은 다음 페이지 일부를 번역했습니다.

https://blog.isquaredsoftware.com/2021/01/context-redux-differences/

 

Blogged Answers: Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux)

Definitive answers and clarification on the purpose and use cases for Context and Redux

blog.isquaredsoftware.com

 

Context와 Redux가 같은 건가요?

아닙니다. 둘은 다른 도구이고, 다른 일을 하고, 다른 목적을 위해 쓰입니다.

 

Context가 "상태 관리" 도구인가요?

아닙니다. Context는 의존성 주입(Dependency Injection)의 한 형태입니다. Context는 전송(transport) 메카니즘입니다. - Context는 어떠한 것도 "관리"하지 않습니다. 모든 "상태 관리"는 당신과 당신의 코드(일반적으로 useState/useReducer)에 의해 수행됩니다.

 

Context와 useReducer가 Redux를 대체하나요?

아닙니다. 둘은 유사한 부분도, 중복되는 부분도 있지만 기능면에서 큰 차이가 있습니다.

 

언제 Context를 사용해야 하나요?

Component 계층 구조를 따라 props를 통해 value 내려보내지 않고, React component tree의 일부에 접근할 수 있도록 하는 value가 있을 때 사용하면 됩니다.

 

언제 Context와 useReducer를 사용해야 하나요?

어플리케이션의 특정 섹션 내에 적당히 복잡한 리액트 Component의 상태관리가 필요한 경우에 사용하면 됩니다.

 

언제 Redux를 사용하면 되나요?

리덕스는 다음과 같은 경우에 유용합니다.

  • 앱의 여러 위치에 필요한 많은 양의 어플리케이션 상태가 있을 때.
  • 앱 상태가 시간에 따라 자주 업데이트 될 때.
  • 상태 업데이트를 위한 로직이 복잡할 때.
  • 앱의 코드 베이스가 적당히 크고, 많은 사람들이 작업할 때.
  • 애플리케이션의 상캐가 언제, 왜, 어떻게 업데이트 됐는지 이해하고 시간 경과에 따른 상태 변경을 시각화할 수 있기를 원할 때.
  • 부작용, 지속성, 데이터 직렬화를 관리하기 위한 보다 강력한 기능이 필요할 때.

목차

- 소개

- Context와 Redux에 대한 이해

    - React Context란 무엇인가?

        - Context 사용하기

        - Context의 사용 목적과 예시

    - Redux란 무엇인가?

        - Redux와 React

        - React의 사용 목적과 예시

- 왜 Context는 "상태 관리"가 아닌가

- Context와 Redux 비교

    - Context와 useReducer

- 적당한 도구 선택하기

    - 사용 예시 요약

    - 추천

- 결론

- 더 많은 정보..