Section3 Unit4 [React] 상태 관리 - Redux

---

Section3 Unit4 [React] 상태 관리 - Redux

 

📌 Chapter2. Redux

• Redux를 사용하는 이유

 React의 데이터 흐름에 따르면 상태는 상태가 사용되는 컴포넌트의 공통된 상위 컴포넌트에 위치시키는 것이 적절하다. 

아래와 같이 컴포넌트3과 컴포넌트6에서 상태를 사용해야 한다면 최상위 컴포넌트에 상태를 위치시켜야 한다.

 

React 에서의 데이터 흐름

 

하지만 이런 상태 배치는 다음과 같은 이유로 다소 비효율적이라고 느껴질 수 있다.

1. 해당 상태를 직접 사용하지 않는 최상위 컴포넌트, 컴포넌트1, 컴포넌트2도 상태 데이터를 가짐
2. 상태 끌어올리기, Props 내려주기를 여러 번 거쳐야 함
3. 애플리케이션이 복잡해질수록 데이터 흐름도 복잡해짐
4. 컴포넌트 구조가 바뀐다면, 지금의 데이터 흐름을 완전히 바꿔야 할 수도 있음

 

Redux 에서의 데이터 흐름

 

 

 Redux는 전역 상태를 관리할 수 있는 저장소인 Store를 제공함으로써 React가 여러 컴포넌트를 거쳐 상태를 전달하는 문제를 해결할 수 있다.

 기존 React에서의 데이터 흐름과, Redux를 사용했을 때의 데이터 흐름을 비교해 보면, Redux를 사용했을 때의 데이터 흐름이 보다 더 깔끔해지는 것을 알 수 있다.

---

 

 이번에 Redux를 공부하면서 세번이나 각자 다른 분들에게서 추천받은 같은 영상... 😂

 리덕스를 이해하는데 확실히 좋은 영상인 것 같다..! 

 

---

🌙  오늘의 회고

 오늘 한줄 요약 : 리덕스에 대한 기대감에 가득찬 채로 오늘 하루를 시작했지만 남는건 상처뿐이었다는…

 리덕스, 매우 편하고 좋을 줄 알았는데 처음(?) 사용하니 너무 어렵고 헷갈렸다. porps drilling은 단순히 prop을 계속해서 전달해야 하는 불편함이 있었던 것이지만, 리덕스는 데이터의 흐름도 헷갈렸고, 새로운 용어들의 등장과 redux의 작동 방식 자체를 이해해야 코드를 짤 수 있었기 때문에 그것 또한 쉽지 않았다. 그래서 오늘 과제는 거의 짜집기로 구현을 했는데, 그러고 나니 뭔가 허탈했던 기분.. 😮‍💨 페어와 같이 대화를 하면서 구현을 하고 싶었는데, 내가 잘 이해가 안되는 상태로 페어 활동을 하니 그게 쉽지 않았다..ㅠ

 여튼 그러하여 스터디에서 공유해준 노마드코더의 Redux 강의(노마드 코더에 리덕스 강의도 있었군?!)를 보며 다시 공부를 해야겠다는 생각이 들었다. 유어클래스에서 제공해준 글로 된 학습자료를 보며 정리를 한 번 했던 터라 영상을 보니 이해가 확실히 더 잘 되는 듯 했고, vanilla JS와 React에서의 Redux 활용을 각각 보여준다는 것에 대한 기대감도 있었다. 지금은 vanilla JS + Redux 학습으로 리덕스 활용에 조금 익숙해졌고, 내일 React + Redux 조합으로 공부를 하고, 이번 과제를 다시 구현해보기로 했다.

 벌써 한 주가 지나간다. 출근을 안하는데도 주말이 기다려진다. 한 숨 돌리고, 한 주 동안 못했던 공부를 할 수 있는 시간이 생긴다는 것에 조급함이 조금 줄어드는 기분이다.