리덕스의 필요성 (redux 공부하기 #1)

필자는 리덕스에 대한 코드 스테이츠 과정에서 리덕스에 대해서 학습하였지만 코드로 구현하는 부분과 리덕스 코드를 이해하는 부분이 부족하다고 느껴져 인프런에서 제로초님의 'Redux vs MobX (둘 다 배우자!)'라는 유료 강의를 결제해 수강하고 있다. 강의 특성상 MobX 내용이 포함되어 있지만, 시간 관계상 redux에 관한 내용 위주로 학습하려고 한다.

 

이 글의 목적은 강의를 수강하면서 학습한 내용을 이해 및 정리하고자 이렇게 글을 적게 되었다.

이번 기회를 통해 리덕스에 대해 제대로 이해해보고 프로젝트에서 사용한 리덕스 코드도 같이 이해하려고 한다.

 

 

source: https://redux.js.org/

 

 

---

 

 

리덕스의 필요성

리액트를 활용한다면 무조건 리덕스를 사용해야 한다는 것은 아니라고 한다.

리덕스와 몹엑스는 리액트와 상관없다고 한다.

리덕스는 상태관리 도구이며, vue나 angular에서도 리덕스를 사용할 수 있지만 그들만의 생태관리 도구가 있어서 굳이 리덕스를 사용하지 않아도 된다고 한다.

 

'리액트가 프레임워크이냐? 라이브러리냐?'라는 논쟁이 나오는 이유가

리액트 공식 홈페이지에 리액트가 라이브러리라고 적혀 있어서 그렇다고 한다.

리액트가 상태 관리나 라우팅, 이런 것들을 기본적으로 제공을 안 하여 프레임워크의 필요 조건을 충족하지 못했기 때문에 라이브러리라고 하는데, 리액트 생태계 자체는 프레임워크라고 한다. 리액트를 사용할 때, 상태 관리나 라우팅을 안 하는 프로젝트를 거의 보질 못 했다고 한다. 필자도 그렇다 ㅎ

 

 

---

 

 

어쨌든 생태 관리를 하기 위해서는 여러 선택지가 생기게 되는데 리덕스, 몹엑스, contextAPI가 선택지가 된다.

 

여기서 'contextAPI가 리덕스와 몹엑스를 대체할 수 있나요?'라는 질문이 나올 수 있다.

 

근데 이 질문은 '자바스크립트가 제이쿼리를 대체할 수 있나요?'라는 질문과 똑같다고 한다. 왜냐하면, 제이쿼리를 사용하는 이유가 제이쿼리에서 제공하는 기능들이 있고  제이쿼리도 자바스크립트로 만들어졌기 때문에 사용하기 편한 것이다.

 

또한, contextAPI와 useReducer를 이용해서 상태 관리를 하게 되면 어차피 결국, 리덕스 혹은 몹엑스를 구현하고 있을 것이니 애초에 처음부터 리덕스, 몹엑스를 사용하는 것이라고 한다.

 

 

---

 

 

리덕스를 공부해본 사람이라면, '리덕스는 단방향이다' 라는 말을 많이 들었을 것이다. 

 

우리가 리덕스를 사용하는 이유를 생각해보면, 컴포넌트 간 데이터(state, props)를 좀 더 편하게 전달하고자 사용하는 목적이 클 것이다.

 

리덕스를 사용하게 되면, state자체를 안 써도 된다. 하지만, state를 안 쓸 수 있게 된 거지 안 써도 되는 것은 아니다. 만약, componentB에서만 state를 사용한다고 하면(컴포넌트 자체에서만 사용한다면) 오히려 리덕스 사용하지 않는 게 더 나을 것이고 그 외 경우라면 리덕스를 사용하는 것이 편할 것이다.

 

 

 

 

 

TMI

앵귤러가 양방향 모델링으로, 데이터를 바꾸면 화면에서도 바뀌고, 화면에서 바꾸면 데이터도 바뀐다고 한다. 
이 부분이 편하기도 하지만, 프로그램이 복잡해지다보면 서로가 서로를 바꿔서 버그가 많이 생긴다고 한다. 
그래서 페이스북이 flux라는 단방향 패턴을 개발하기 시작했고 현재는 지금의 리덕스까지 왔다고 한다.