React-Redux는 왜 사용해야할까?

JINBOK LEE·2022년 7월 16일
0
post-thumbnail

React는 단방향 통신이다. 즉, 부모가 자식에게만 데이터를 전달할 수 있는데

만약 부모(App.js) 하위의 페이지들이 무수히 많이 필요하다면?

Untitled

각 페이지의 state들은 페이지간 이동이 되지 않기 때문에, 부모에게 props를 만들어 전달해야 하고

이 props의 개수가 점점 많아지며 코드가 복잡해지기 마련이다.

이러한 React의 단점(불편함)을 극복하기 위해 Redux는 항상 짝꿍처럼 함께 쓰인다.

Untitled

즉, Redux는 일종의 저장소이고 필요한 state들을 저장해둔다.

component가 어느 위치에 있던 상관 없이, 언제든지 store에 저장된 state들을 가져올 수 있다!

이야기를 들으면 매우 간단한 기능처럼 들린다.

그런데, 본인과 같은 학생들이 이 Redux를 처음 접했을때 어려워 하는 이유가 무엇일까?

먼저 Redux를 이용하였을 때, component는 store의 값을 direct로 요청하거나 수정할 수 없다.

따라서, 아래와 같은 과정을 거쳐야 한다.

  1. component는 action을 만들고, (ex. 상품 정보 가져오기)

  2. action은 reducer라는 ‘function’으로 넘어간다. (reducer는 다양한 행동지침 list를 가진 함수라고 생각하면 되고, action에 해당되는 알맞은 행동지침을 실행한다)

  3. 최종적으로, reducer의 행동지침에 따라 store의 값을 가져오거나 변경을 하게 된다. (이때, store은 state를 다 가지고 있는 정적인 object 이고, 이 object는 reducer에 따라 수동적으로 바뀐다)

React만을 사용하여 간단한 카운팅 앱을 만들어 보고, 그것을 React-Redux를 사용하여 코드 리펙토링을 해 보았다.

React-Redux를 직접 사용해보니 "아 이래서 편하다고 하는구나" 라고 느낄 수 있었고, 한편으로 아직 갈길이
한참 멀었다 라는 생각을 하게 되었다.


현재 정말 많은 프레임워크와 라이브러리들이 존재하는데, 앞으로 내가 초점을 맞추어 준비해 나갈 것이 무엇일까
고민을 하게 되는 시간이었다.

profile
깔끔한 비즈니스 로직 설계를 위해 공부하는 FE 개발자

0개의 댓글