210317_ TIL / redux

오늘 한 일

• 회원가입 유효성검사
• 액션타입 만들기

공부한거

리덕스 기본

redux는 기본적으로 flux 패턴을 따릅니다

flux 패턴이란 ? - 데이터 흐름이 단방향으로 전달되는 소프트웨어 개발에서 사용된다.

Flux 아키텍처의 가장 큰 특징으로는 '단방향 데이터 흐름(unidirectional data flow)'을 들 수 있다. 데이터의 흐름은 언제나 디스패처(Dispatcher)에서 스토어(Store)로, 스토어에서 뷰(View)로, 뷰에서 액션(Action)으로 다시 액션에서 디스패처로 흐른다.

Action -> Dispatch -> Store -> View

redux의 데이터 흐름은 동일하게 단방향으로 view(컴포넌트)에서 Dispatch(store에서 주는 state를 바꾸는 함수)라는 함수를 통해 action(디스 패치 함수 이름)이 발동되고 reducer에 정의된 로직에 따라 store의 state가 변화하고 그 state를 쓰는 view(컴포넌트)가 변하는 흐름을 따릅니다

Spring을 배울때, Singleton과 MVC 디자인패턴을 기본으로 다루고 사용했었다.

m- model , v- view, c- control

사용하는 이유

state 종속성 탈피

우리는 useState를 사용 할 경우 컴포넌트 내부에 state를 만들고, 함수로 state를 바꿉니다.그렇기 때문에 state는 컴포넌트에 종속되는 것은 당연한 결과 입니다.redux는 컴포넌트에 종속되지 않고, 상태관리를 컴포넌트 바깥에서 합니다.프로젝트 루트레벨에서 store라는 곳에 state를 저장하고, 모든 컴포넌트는 store에 구독을 하면서 state와 그 state를 바꾸는 함수를 전달 받게 되죠. 함수를 바꿈으로 state가 바뀌면 해당 state를 바라보고 있는 컴포넌트는 모두 리렌더링 됩니다.

reducer 정의

• reducer는 store에 들어갈 state와 state를 바꿀 함수를 정의하는 곳입니다.
• 기본적으로 순수함수로 코딩하고, 불변성을 지켜야 합니다.

중요! - 불변성을 지켜야하는 이유

• 불변성을 지켜야하는 이유는 redux는 이전 state와 바뀐 state를 구분하는 방법이 참조값이 바뀌었는지 확인하고, 참조값이 바뀌면, state가 바뀌었다고 redux가 인식하여, 해당 state를 사용하는 컴포넌트에게 리렌더링을 요청하기 때문입니다.
  • 그렇기 때문에, state.test = action.test와 같이 직접적으로 state를 변경하면 참조값이 변하지 않아 redux는 값이 바뀌었다고 인식하지 않고 리렌더링 되지 않습니다.
  • state.test = {...test, action.test}
  • 또는 immer라는 라이브러리를 사용하여 쉽게 불변성을 유지합니다.

내일 할일

• 리덕스 적용
• 리듀서 만들기