[TIL 2023.07.03] Redux란 무엇인가

💻오늘 배운 내용

Redux란 무엇인가

Redux를 주로 사용하면서 과제나 프로젝트를 진행하고 있는데 아직도 개념이 제대로 잡힌 것 같지 않아서

다시 한번 정리 하는 시간을 가져봤다.

 

리덕스의 구성요소

1. Store : 모든 전역 state들을 관리하는 단 하나의 상태 저장소 (→ 단 하나의 객체)
   • store: { todos, auth }
   • store 내부의 리듀서들로부터 각각 최신 상태를 제공받는다.
2. Reducer : state 변경 함수
   • 매개변수로 기존상태와 액션객체를 받음
   • 상태 변경 후 최신 상태를 Store에 제공 (리턴)
3. Action : { type, payload } 형태의 객체
   • 리듀서 함수에게 전달되는 인자
   • 리듀서에게 요구할 상태변경 작업에 대한 정의를 나타내는 객체 (상태 변경 요청서)
   • type 은 필수 속성, payload는 선택 속성
4. Dispatch: 액션 객체를 인자로 받아 리듀서를 호출시키는 함수
   • dispatch(액션객체) 가 실행되면 리듀서 함수의 매개변수로 action 객체를 전달하며 호출

 

리덕스를 사용하는 이유

• props drilling 으로 인한 불편함을 해소
• 상태관리에 대한 유지보수성이 좋아진다. (코드베이스 규모가 커질 수록 Good)
• 디버깅이 쉬워진다. (redux dev tools) - 단순 전역 상태관리를 넘어 추가적인 옵션 기능 제공

 

리덕스 동작순서

1️⃣ 초기 상태 받기 : 페이지 랜딩 시 useSelector 를 통해 store에서 initialState 를 받아 UI 를 렌더링한다.

 

2️⃣ 상태 변경 요청 : 사용자 이벤트 발생 시 상태변경을 위해 dispatch(action)로 store 내 각 리듀서들에게 action 전달하며 실행시킨다.

 

(A 리듀서 호출만을 의도했어도 B 리듀서도 함께 호출된다. → action.type이 중복되면 안되는 이유!)

 

3️⃣ 상태 변경 처리 : 기존 state는 store부터, action 객체는 dispatch를 통해 매개변수로 받아서 리듀서 함수를 실행하여 action.type에 따라 상태 변경 처리 후 store에 변경된 최신 상태를 제공한다.

 

4️⃣ 신규 상태 받기 : useSelector를 통해 store의 특정 상태를 구독중인 현재 페이지 컴포넌트(View)는 상태 변경 알림을 받고 리렌더링한다.

 

🧐궁금점과 부족한 내용

리덕스 동작원리와 예시코드들을 보면서 느낀점은

payload를 넘겨 주고 적용 시키는 과정에 대한 개념이 잘 잡혀있지 않은 것 같다.

 

개인적으로 많이 만들어보고 해야 감이 잡힐 것같다..

지난주 정말 최악의 한 주를 보냈다. 무엇 하나 성장하지 못한 기분.

배움의 과정에 있는 내가 일주일이나 통으로 시간을 낭비했다는 사실이 스스로 한심하면서도

거의 자학에 가까운 행위가 아니었나 싶다. 

 

뭐라도 결과를 만들어 내보자~