[What is?] 리덕스가 뭔가요?

 

리액트를 쓰다보면 리덕스에 관한 정보를 심심치않게 접하게 됩니다. 그리고 주워들은 정보에 의하면, 리덕스를 사용했을 때 state 관리가 훨씬 쉬워진다고들 이야기 합니다. 오늘의 포스팅은 바로 그 리덕스에 관한 이야기를 해보도록 하겠습니다.

 

1. 리덕스에 대한 정의

 

1) 리덕스란?

리덕스란 자바스크립트 앱에서 상태(state)를 효율적으로 관리할 수 있게 도와주는 도구 입니다. 하나의 페이지에서 모든 레이아웃과 기능들이 작동하는 요즘의 SPA에서 특히나 유용하게 사용할 수 있는 도구라고 할 수 있습니다. 리덕스는 리액트 외에도 다양한 js 프레임워크 및 라이브러리에서 사용할 수 있지만, 리액트에 특화되어 있기에 리액트에서 그 효율성이 극대화 된다고 할 수 있습니다. 

 

2) 리덕스 왜 필요한가요?

리액트로 개발을 하다보면 필연적으로 state와 props라는 개념을 마주하게 됩니다. 솔직히 이 state와 props 없이 어떻게 리액트 개발을 할 수 있는지 잘 모를 정도입니다. 이 state는 일방향성을 가지고 있어 무조건 부모에서 자식으로만 정보를 전달할 수 있습니다(자식도 부모에게 정보를 전달해 state를 변화시킬 수 있지만 보다 전자에 비해서는 복잡합니다).

 

이미지 출처: https://velopert.com/3528(벨로퍼트 블로그)

 

이러한 구조는 앱의 구조가 단순할 때는 큰 문제가 없습니다만, 점점 앱이나 페이지의 크기가 커지고 처리해야 하는 데이터의 양이 늘어나면 문제가 됩니다. 컴포넌트 간에 데이터를 주고 받는 일이 어려워지기 때문이죠. 

 

이미지 출처: https://velopert.com/3528(벨로퍼트 블로그)

 

위의 그림처럼 Root 컴포넌트에서 G에 state를 내려주는 것만 해도 벌써 세단계를 거쳐야 하는데 만약 B나 C에서 G에게 데이터를 전달해야 한다면, 그 복잡성은 이전에 비해 훨씬 높아지게 됩니다. 

 

이런 문제를 해결하고자 등장한 것이 바로 리덕스입니다. 리덕스는 state를 한 곳에서 관리하면서 각 페이지들이 필요로 하는 상태 값을 주고 받는 거래소(?) 같은 역할을 해줍니다.

 

이미지 출처: https://velopert.com/3528(벨로퍼트 블로그)

 

 

 

 

2) 필요 개념

(1) 액션

 

한 페이지에서 상태가 변화하면 액션이라는 것을 발생시킵니다. 이는 하나의 객체로 생성되는데요, 이렇게 생성된 객체를 주고 받으면서 state를 관리하게 됩니다. 액션 개체는 다음과 같은 형태를 지니고 있습니다.

 

{
  type: "TOGGLE_VALUE"
}

 

액션은 type이라는 키 값을 필수적으로 가져야 합니다. 이 type을 통해 어떤 형태의 액션이 발생했는지를 알려주고 그 밑에 포함되어 있는 키와 밸류로 어떻게 상태가 변화해야 하는지 알려줍니다.

 

(2) 액션 생성함수

 

액션 생성함수는 말 그대로 액션을 생성해주는 함수입니다. 변화에 필요한 인자를 받아와서 액션 객체로 만들어 줍니다.

 

function addTodo(data) {
  return {
    type: "ADD_TODO",
    data
  };
}
//출처: https://velog.io/@youthfulhps/What-is-Redux-and-why-use-it#-action

 

(3) 리듀서 

 

리듀서는 변화를 일으키는 함수입니다. 리듀서는 두 가지 인자를 받아옵니다.

 

function reducer(state, action) {
  return alteredState;
}

//출처: https://velog.io/@velopert/Redux-1-%EC%86%8C%EA%B0%9C-%EB%B0%8F-%EA%B0%9C%EB%85%90%EC%A0%95%EB%A6%AC-zxjlta8ywt

 

리듀서는 현재 상태와 전달 받은 액션을 기반으로 새로운 상태를 만들어 반환합니다.

 

(4) 스토어

 

리덕스에서는 한 애플리케이션 당 하나의 스토어를 가지게 됩니다. 스토어에는 현재의 앱 상태, 리듀서가 포함되어 있고, 몇가지 내장 함수들이 있습니다.

 

(5) 디스패치

 

디스패치는 스토어에 들어있는 내장함수 중 하나입니다. 디스패치는 액션을 인자로 전달하고 스토어는 리듀서 함수를 실행시켜 해당 액션과 관련된 로직을 참고로 하여 새로운 상태를 만들어 냅니다.

 

(6) 구독

 

구독 역시 스토어의 내장함수 중 하나입니다. 구독은 함수 형태의 값을 인자로 받아오는데, 구독 함수에 특정함수를 전달하면 액션이 디스패치 될 때마다 전달해준 함수가 호출됩니다.

 

 

2. 리덕스의 특장점 및 단점

 

1) 특장점

 

리덕스의 장점은 앞서 말씀드렸다시피 state를 한 군데서 관리하기 때문에 state를 관리하기 쉽고, 여러 컴포넌트에 분산된 state 값을 주고받는 것이 매우 편합니다. 또 데이터가 집중 되어 있다는 특징으로 인해 데이터의 변화를 예측하기 쉽다는 장점 역시 존재합니다. 또 제가 리액트를 선택한 이유 중에 하나인 생태계가 매우 크고 활발하다는 것 역시 장점으로 작용합니다. 

 

2) 단점

 

리액트의 단점 첫 번째는 러닝커브가 존재한다는 것입니다. 배움이 어렵다는 것은 그만큼 진입장벽으로 작용하기도 하고 초보자가 익숙해지는데 시간이 필요함을 의미하기도 합니다. 그만큼 초보자가, 시간이 촉박한 프로젝트에서는 사용하기 쉽지 않을 수도 있습니다. 

 

두 번째 단점은 리덕스가 개발자의 행위를 제약할 수도 있다는 점입니다. 리덕스는 리덕스만의 개발 철학이 존재하는 라이브러리이기 때문에 그 개발 철학에 맞는 흐름에 따라 코딩이 이루어져야 합니다(이 점에 있어서는 프레임워크처럼 느껴지기도 합니다). 또 그렇기 때문에 기존에 비해 더 많은 코드를 입력해야 하는 경우도 생깁니다. 그만큼 개발자는 추가적인 업무를 더 해야할 수도 있습니다(눙물...).

 

 

3. 마무리

 

오늘은 리덕스에 대해 알아보았습니다. 제가 이번 프로젝트를 진행하면서 컴포넌트 별 상태관리가 매우 번거로워서 리덕스를 꼭 써보고 싶다는 생각이 들었는데요, 리덕스에 대한 자료를 찾아보니 정말 제게 꼭 필요한 라이브러리였다는 생각이!!!! 들다가 러닝 커브가 존재한다는 말에 주춤하게 되었네요 ㅎㅎ. 그래도 익숙해지면 그만큼 제 코딩 실력이 업그레이드 될 것이라고 믿으며 다음 프로젝트 때에는 리덕스를 활용해보도록 해야겠습니다. 

 

박수~~