23.06.27
1. Redux 강의, ‘쉽게 다시보는 리덕스’
리덕스는 리액트를 편하게 사용하기 위한 보조수단일뿐. 너무 어렵게 생각하지말자
리액트의 본질은 “상태가 변경되었을 때 해당 상태에 의존하는 컴포넌트는 리렌더링 된다”이다.
리덕스 : 가장 인기 있는 전역 상태관리 라이브러리
리덕스를 사용하기 전에는 state의 위치가 컴포넌트에 있었지만 사용하게 되면 state의 위치가 store라는 외부저장소에 있음
그렇게 되어 우리 컴포넌트는 store 안에 있는 state를 가져오기 위해 구독함
state를 가져오는 건 알겠음
그렇다면 state를 변경하시는 건 ?
컴포넌트는 reducer(리듀서)에게 상태 변경을 ‘이렇게~~~’ 해달라는 action이라는 요청서를 보냄
리듀서는 상태변경 함수로 전달받은 요청서에 따라 상태를 변경하고 store에 변경된 최신 상태를 넘겨줌
그리고 또 컴포넌트는 store를 통해 새롭게 업데이트된 state를 받게 되는 것 !!!!!
- Store : 모든 전역 state (= 데이터) 들을 관리하는 ‘단 하나’의 상태 저장소
자바스크립트 객체 형태로 표현
store 내부에 리듀서들로부터 업데이트 된 최신 상태를 제공받음 - Reducer : state를 변경하는 함수
매개변수로 기존 상태(= state)와 액션객체를 받음
상태 변경 후 최신 상태를 store에 리턴 - Action : 리듀서에게 요구할 상태변경 작업에 대한 정의를 나타내는 객체 (상태 변경 해달라는 요청서 역할)
{type, payload } 형태의 객체로, type 은 필수 속성, payload는 선택 속성
리듀서 함수에게 전달되는 인자 ??? - Dispatch: 액션 객체를 인자로 받아 리듀서를 호출시키는 함수
dispatch(액션객체) 가 실행되면 리듀서 함수의 매개변수로 action 객체를 전달하며 호출
그렇다면 리덕스를 왜 사용해야 할까 ?
코드의 규모가 커질수록 느껴지는 props drilling으로 인한 불편함이 해소되어 상태 관리에 대한 유지보수성이 편리해지고, 디버깅도 쉬워짐
리덕스 동작 순서
- 초기 상태 받기 : useSelector() 사용해서 store에 있는 state 값을 가져오기
- 상태 변경 요청 : 사용자 이벤트 발생 시 상태변경을 위해 dispatch(action)로 store 내 각 리듀서들에게 action 전달하며 실행. 이때 action.type이 중복되면 안됨. ꖶዞ냐하면 dispatch가 실행될 때 모든 리듀서가 실행되기 때문에 만약 타입이 중복되면 원하지 않는 다른 리듀서까지 함께 호출되어 렌더링됨.
- 상태 변경 처리 : 기존 state는 store로 부터, action 객체는 dispatch를 통해 매개변수로 받아서 리듀서 함수를 실행하여 action.type에 따라 상태 변경 처리 후 store에 변경된 최신 상태를 제공
- 신규 상태 받기 : 계속해서 useSelector() 통해 store에 있는 업데이트 된 state 값을 가져오면서 리렌더링함
주의해야 할 점
- 휴먼에러를 방지하기 위해 액션 생성자 함수 사용하는 것이 좋음
- 서로 다른 리듀서 모듈이어도 action.type이 중북되면 안됨, 그러므로 서로 다른 모듈이라면 액션 타입을 정의할 때 리듀서명 / 액션명의 조합으로 중복이 되지 않게 정의하는 컨벤션 권장
- state 자체를 구독하는 건 지양 => 필요한 state만 구독해야함 !
