React] Redux와 상태에 대한 이해

웹개발을 하다 보면 상태관리가 필요할 때가 있다.

즐겨찾기 갯수의 증가, 인스타그램 좋아요 버튼 등등..

 

 

 이때 Redux의 사용은 상태 관리를 보다 효율적으로 도와주는 도구다.

이번 글에서는 Redux의 개념과 상태의 정의에 대해 자세히 알아보려고 한다.

 

 

 

상태(State)의 정의

 

 

상태는 애플리케이션의 특정 시점에서의 데이터나 정보를 나타낸다.

사용자 인터페이스(UI)의 현재 상태를 반영하며, 사용자의 입력,

서버로부터의 응답, 애플리케이션의 로직 등에 따라 변할 수 있다.

예를 들어, 로그인 여부, 장바구니에 담긴 상품, 사용자의 설정

등이 상태에 포함된다.

상태는 보통 다음과 같은 특성을 가진다

 

 

 

• 변경 가능성: 사용자의 행동이나 애플리케이션의 이벤트에 따라 상태는 변할 수 있다.

 

• 중앙 집중식 관리: 상태를 한 곳에서 관리하면 데이터 흐름을 이해하기 쉽고, 애플리케이션의 일관성을 유지하는 데 유리하다.

 

 

 

Redux란 무엇인가?

 

 

Redux는 자바스크립트 애플리케이션에서 상태 관리를 도와주는 라이브러리다.

React와 같은 UI 라이브러리와 함께 사용되며, 상태를 예측 가능하게 만들어주는 역할을 한다.

Redux의 주요 특징은 다음과 같다:

 

 

1. 단일 상태 트리: 애플리케이션의 모든 상태는 하나의 객체로 저장된다. 이를 통해 상태를 쉽게 추적하고 관리할 수 있다.
2. 상태 변경은 액션을 통해서만: 상태를 변경할 때는 반드시 액션을 발생시켜야 한다. 액션은 상태 변경을 설명하는 객체로, type과 payload를 포함한다. 이를 통해 상태 변경의 이력을 추적할 수 있다.
3. 순수 함수인 Reducer: 상태 변경 로직은 Reducer라는 순수 함수에서 처리된다. Reducer는 이전 상태와 액션을 받아 새로운 상태를 반환한다. 이러한 방식은 상태의 예측 가능성을 높인다.

 

 

 

 

Redux의 장점

• 예측 가능성: 모든 상태 변경이 액션을 통해 이루어지므로, 어떤 사건이 상태를 변화시켰는지 쉽게 알 수 있다.
• 중앙 집중식 관리: 모든 상태가 하나의 객체로 관리되기 때문에, 애플리케이션의 상태를 한눈에 파악할 수 있다.
• 디버깅 용이성: Redux DevTools와 같은 도구를 통해 상태의 변화 이력을 쉽게 추적할 수 있다.

 

 

 

 

결론

Redux는 상태 관리를 보다 효율적으로 도와주는 도구로,

특히 대규모 애플리케이션에서 유용하다.

상태의 정의와 함께 Redux의 구조를 이해하면 애플리케이션을 보다 체계적으로 관리할 수 있게 된다

상태 관리의 중요성을 인식하고, 필요에 따라 Redux를 활용하는 것이 좋겠다.

 

(다음에는 상태관리의 양대산맥 mobX, Recoil에 대해서도 정리해 보고 비교해 봐야겠다..)

 

 

 

++요즘따라 게시 빈도수가 줄고있다...

이것은 진행중인 웹프로젝트의 진척도가 떨어지고있고,

개발이 더디다는증거이다.. (왜냐면 깔끔히 해결되지가않거든)

뭔가 착착 진행되야 정리할것도 생겨나거늘......
파이팅...!