redux 를 고민하게 된 계기
사내에 react 개발자는 우리 프론트팀 3명(주니어) 뿐이였다....
출처: 유튜브채널 - 개발바닥
실서비스 에서 react 관련 궁금점이 너무나 많았고,이러한 니즈로
팀내에 시니어 개발자분께서 전회사 시니어 프론트 개발자분과 미팅을 잡아주셨다.
우리는 상태관리에 대한 질문을 한보따리 들고 미팅에 참석했고
여러가지 조언과 함께 redux를 간과해서 쓰고있다는 점에 도달했다
우리가 redux를 사용하는 이유는
- 무분별한 props 사용으로 관리가 힘들어서
- 전역적으로 컴포넌트 공통적으로 관리하고 싶은 데이터가 있어서
위와 같았고 미팅때 여러가지 질문을 받았는데
- 그럼 react 에서 지원하는 contextApi도 있는데 그거쓰는건 어때요?
- redux 쓰면 추가 작업할께 너무 많지 않을까요? 그런데도 왜 redux를 쓸까요
(실제 질문은 더 deps가 있는데 기억잘안남 ; ,,,)
어영부영 대답한 내자신을 반성하며 왜쓰는지 다시 집고 가고자 한다
왜 redux 를쓰는가 ?
상태관리 하려고 ...
react 내부에선
- 자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능 하다.
- 자식 컴포넌트들 간의 데이터를 주고 받을 때는 상태를 관리 하는 부모 컴포넌트를 통해서 주고 받는다.
그런데 자식이 많아진다면 상태 관리가 매우 복잡해진다.
💁♂️상태관리 란..: https://hanamon.kr/%ec%83%81%ed%83%9c%ea%b4%80%eb%a6%ac%eb%8f%84%ea%b5%ac-%ed%95%84%ec%9a%94%ec%84%b1/
그래서 상태관리를 편하게 하려고 redux를 썼다!
- redux 는 전역 상태 저장소를 제공해준다
- 상태를 전달하기위한 props 문제를 해결해 준다
쫌더 딥하게 들어가보면
리덕스의 장점 에는
- 상태를 예측 가능하게 만든다. (순수함수를 사용하기 때문)
- 유지보수 (복잡한 상태 관리와 비교)
- 디버깅에 유리 (action과 state log 기록 시) → redux dev tool (크롬 확장)
- 테스트를 붙이기 용의 (순수함수를 사용하기 때문)
음음 이래서 썼다!
출처 - redux 장점 :
https://hanamon.kr/redux%eb%9e%80-%eb%a6%ac%eb%8d%95%ec%8a%a4-%ec%83%81%ed%83%9c-%ea%b4%80%eb%a6%ac-%eb%9d%bc%ec%9d%b4%eb%b8%8c%eb%9f%ac%eb%a6%ac/
참조 - redux란:
https://velog.io/@cada/React-Redux-vs-Context-API
contextApi 왜안쓰는데 ?
자 위에서 redux 가먼지 알아봤고 장점도 알아봤으니
대답을 하기 전에 contextApi에 대해 알고 가보자
contextApi 또한 전역상태 도구이다 react 에서 제공하는
api이기 떄문에 react 에서만 사용가능하다 자그럼 여기까지
보면 redux 와 conetextApi 차이가 없어보인다
BUT
이들의 큰차이는 목적에 있다 차이다
contextApi 사실 상태를 관리 하진 않는다 단순히 상태를 전달하는 파이프와 같다
contextApi 의 목적은 자식컴포넌트간의 상태 전달이다
redux 는 시간이 지남에 따라 상태 값들이 어떻게 변하는지 쉽게 이해 할 수 있도록 돕는 것이다.
참조 - react 처음이면 redux 로 가지말아봐: https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367
참조 - react vs ContextAPi :
https://olaf-go.medium.com/context-api-vs-redux-e8a53df99b8
redux란 최선의 방법인가?
상황에 따라 다르다!
해결하려는 문제에 가장 적합한 도구를 우리가 골라써야한다
이유1 :
context API 는 :
React에 내장되어 있으므로 추가 타사 종속성이 필요하지 않습니다.
결과적으로 더 작은 번들과 개선된 프로젝트 유지 관리 가능성이 있습니다.
API는 또한 일단 익숙해지면 비교적 간단하게 사용할 수 있습니다
Redux는 미들웨어를 추가하는 기능 외에는 즉각적이고 명백한 이점을 제공하지 않습니다.
이유2 :
간단한 형태의 웹을 구성함에 있어서, React 만으로도 단방향 데이터 흐름을 충분히 사용할 수 있는 경우, Redux 라이브러리를 import 하는 것은 불필요한 라이브러리를 추가하여 애플케이션 번들 사이즈만 증가시킬 뿐이다
즉, 필요성에 대한 여부를 판단하고 사용하는 것이 가장 적절한 의사결정이라고 볼 수있다
출처 : https://devlog-h.tistory.com/26#:~:text=%ED%95%98%EC%A7%80%EB%A7%8C%2C%20redux%EB%A5%BC%20%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94,%EC%9E%88%EB%8B%A4%EB%8A%94%20%EC%9E%A5%EC%A0%90%EC%9D%84%20%EA%B0%96%EC%8A%B5%EB%8B%88%EB%8B%A4.마치며
타사 시니어분께서 하신말씀이 기억난다.
"어떤 라이브러리 미들웨어를 쓰는건 그팀에서 정하기 나름이고 상황마다 다르기 떄문에 최선의 방법은 팀내에서 만들어가는것이다."
redux를 사용하면서 나는 얼마나 생각을 해봤을까?아니면 그에대한 노력이라도 하는가? 주말에 할께많아지는 밤이다 ...
