redux 강의 기본 핵심 튜토리얼 1탄 - redux란 무엇일까?

이 글은 리덕스 docs를 해석, 요약 한 글입니다(ko.redux.js.org/tutorials/essentials/part-1-overview-concepts)

리덕스 docs에서는 redux essentials(리덕스 핵심)을 살펴본 후 튜토리얼로 진행하는 것을 권장합니다

 

 

2탄 - 리덕스를 사용하기 위해 알아야하는 용어 및 개념

redux 기본 핵심 튜토리얼 2탄 - redux 용어 및 개념

3탄 - redux app 구조

redux 강의 기본 핵심 튜토리얼 3탄 - redux app 구조

4탄 - redux data flow

redux 강의 기본 핵심 튜토리얼 4탄 - redux data flow

---

 

1탄에서는 redux를 사용하기 위해 알아야 할 주요 개념과 용어에 대해 알아보겠습니다. 우선, react devtools와 redux devtools extension을 설치합니다.

 

React Developer Tools

Redux DevTools

 

Redux는 무엇일까?

리덕스는 무엇일까요? 어떤 문제를 해결해 줄 수 있을까요? 왜 사용할까요?

 

리덕스는 actions를 사용해서 state를 관리하고 업데이트 하기 위한 패턴 및 라이브러리입니다. 애플리케이션의 전체 state를 관리하는 중앙 저장소 역할을 하고, state가 actions을 통해서만 업데이트 될 수 있도록하는 규칙을 가지고 있습니다.

 

Redux를 사용해야하는 이유는?

애플리케이션의 여러 부분에서 필요한 state를 global에서 관리하는 데에 도움을 줍니다.

 

리덕스에서 제공하는 패턴과 도구를 사용하면 애플리케이션의 state가 언제, 어디서, 왜, 어떻게 업데이트 되는지, 이러한 변경이 발생했을 때 애플리케이션 로직이 어떻게 작동하는지 쉽게 이해 할 수 있습니다.

 

Redux는 언제 사용해야할까?

리덕스는 state를 전역에서 관리하는데에 도움이 되지만 단점도 있습니다. 리덕스를 사용하기 위해서는 알아야하는 개념도 많아지고 코드도 더 많이 작성해야 할 수도 있습니다. 라이브러리이기 때문에 정해진 방식대로 사용해야 하는 제한 사항이 있을 수도 있습니다. 이런 이유로 생상선이 늦춰질 수 있습니다.

 

리덕스를 사용해야 할 때

 - 많은 state가 있고, 여러 컴포넌트에서 사용해야 할 때

 - state가 자주 업데이트 될 때

 - state의 업데이트 로직이 복잡 할 때

 - 크기가 큰 프로젝트에서 여러 사람들이 작업을 해야 할 때

 

Redux 라이브러리 및 도구

리덕스는 react에 종속 되어있는 라이브러리가 아닌 독립적인 js 라이브러리입니다. 그러나 보통 react와 많이 사용하고, 다른 여러 패키지와 함께 사용하기도 합니다 

 

React-Redux

Redux는 모든 UI 프레임 워크와 통합 할 수 있으며 React와 함께 가장 자주 사용됩니다. React-Redux 는 React 구성 요소가 상태 조각을 읽고 저장소를 업데이트하는 작업을 전달하여 Redux 저장소와 상호 작용할 수 있도록하는 공식 패키지입니다.

Redux 툴킷

Redux Toolkit 를 사용하는 것을 추천합니다. 여기에는 Redux 앱을 빌드하는 데 필수적인 패키지와 기능들이 포함되어 있습니다. Redux Toolkit은 redux에서 제시하는 방법들을 기초로 해서 만들어졌고, Redux를 사용할 때 필요한 대부분의  작업을 단순화시켜서 애플리케이션에 redux를 쉽게 적용할 수 있고 redux를 사용할 때 흔히 하는 실수를 방지 할 수 있습니다.

Redux DevTools Extension

시간에 따른 저장소의 state 변화를 보여줍니다. 이를 통해 효과적으로 디버깅 할 수 있습니다.

 

---

 

2탄 - 리덕스를 사용하기 위해 알아야하는 용어 및 개념

redux 기본 핵심 튜토리얼 2탄 - redux 용어 및 개념

3탄 - redux app 구조

redux 강의 기본 핵심 튜토리얼 3탄 - redux app 구조

4탄 - redux data flow

redux 강의 기본 핵심 튜토리얼 4탄 - redux data flow