Redux 이해하기 - (1)

cansweep·2022년 9월 13일
post-thumbnail

What is Redux?

Redux는 "actions"라는 이벤트를 사용해 어플리케이션 상태를 업데이트하고 관리하는 라이브러리이자 패턴이다.
Redux는 전체 어플리케이션에서 사용할 상태를 저장하는 중앙 저장소의 역할을 제공하며 예측 가능한 방식으로만 상태를 업데이트할 수 있는 규칙을 제공한다.

Why Should I Use Redux?

Redux는 global state를 관리하는 것을 도와준다.
global state란 어플리케이션의 많은 부분에서(여기저기서) 필요한 상태를 의미한다.

Redux가 제공하는 도구와 패턴들은 아래의 것들을 쉽게 이해할 수 있도록 도와준다.

  • 어플리케이션의 상태가 언제, 어디서, 왜, 어떻게 업데이트되고 있는지
  • 이러한 변경사항이 발생했을 때 어플리케이션 로직이 어떻게 동작하는지

Redux는 예측 가능하고 테스트 가능한 코드를 작성하는 방법을 안내해 어플리케이션이 당신의 예상대로 작동한다는 확신을 줄 수 있다.

When Should I Use Redux?

Redux는 여느 도구처럼 상태 관리에 도움을 주지만 단점도 존재한다.
Redux를 사용하기 위해 배워야 할 개념이 있고 작성해야 할 코드가 많기 때문이다.
또한 코드에 간접적인 내용이 추가되며 특정 제한 사항을 따르도록 한다.

즉, 모든 앱에 무조건 Redux를 적용해야 하는 건 아니다.
적절하게 짜인 코드는 오히려 전역 상태 관리가 필요하지 않을 수 있다.
따라서 현재 주어진 문제를 해결하는데 도움이 될 경우 Redux와 같은 도구를 사용해야 한다.

다만 Redux는 다음과 같은 경우에 유용하다.

  • 앱 여기저기에 상태가 많이 존재할 경우
  • 시간이 지남에 따라 앱 상태가 빈번히 업데이트될 경우
  • 상태를 업데이트하는 로직이 복잡한 경우
  • 많은 사람들이 작업할 수 있으며 중/대형 코드베이스의 앱일 경우

Redux Libraries and Tools

Redux는 작은 독립형 JS 라이브러리이다.
일반적으로 몇 개의 다른 패키지와 함께 사용한다.

React-Redux

Redux는 어떤 UI 프레임워크든 함께 사용할 수 있지만 React와 제일 많이 사용된다.
React-Redux는 상태 조각을 읽고 저장소를 업데이트하기 위한 액션을 전달하여 React 컴포넌트가 Redux 저장소와 상호작용할 수 있도록 하는 공식 패키지이다.

Redux-Toolkit

Redux-Toolkit은 Redux 로직을 작성할 때 권장되는 접근법이다.
Redux 앱을 빌드하는데 필수적이라고 생각되는 패키지와 함수가 들어있다.

Redux-Toolkit은 모범 사례를 기반으로 하여 대부분의 Redux 작업을 단순화하고 실수를 방지하며 Redux 앱을 작성하는 것을 쉽게 만들어준다.

Redux DevTools Extension

Redux DevTools Extension은 시간이 지남에 따라 Redux 저장소의 상태가 어떻게 변화하는지를 보여준다.
이를 통해 앱을 효과적으로 디버깅할 수 있다.

📎 관련 링크

Redux 공식문서 - 튜토리얼

profile
하고 싶은 건 다 해보자! 를 달고 사는 프론트엔드 개발자입니다.

1개의 댓글

comment-user-thumbnail
2022년 9월 13일

👍👍👍

답글 달기