김민태의 데브캠프 2기 - 실시간 강의 (11/13) 정리

 

이번 포스트에서는 Redux에 대해 알아보고자 한다.

 

우선 React가 나오기 전에는 이러한 방식으로 상태를 관리했다.

 

* Business Logic : ex) 주식의 비율,.. 어떠한 알고리즘

* Datahandle Logic : ex) CRUD(기술적인 부분)

*MVVM : view와 view model을 연결하여 데이터가 바뀌면 자동으로 view가 변한다.

 

그러면 이번엔 React의 상태관리에 대해 알아보자 

React는 Component로 구성되어 있다.

 

Component는 부모가 누구든지 작동하도록 작성한다(독립적)

 

이전 포스트에서, 자식 컴포넌트에서 데이터를 사용하기 위해서는 부모가 "내려"줘야 하는데, 이는 더러운코드이다.

따라서 하나의 파일에서 관리하는데, 이것이 Context API라 배웠다.

위 사진에서 Context를 사용하여 D와 F의 값을 받아 사용하고 있었다.

이때 자식클래스에서 F를 Edit하려 한다.

이때 자식클래스에서 Edit하면 부모클래스의 F도 수정된다.

 

 

왜 ? F는 객체 값이기 때문에 참조형이므로.

개발자들은 생각했다.

 

아 그러면 값을 수정하지말고 오버라이딩하자(store)

즉 수정하고 싶을 때 기존의 값을 복사하여 새로운 객체를 만들고 이것을 가리키도록 하자

즉 가장 마지막 데이터를 가리킨다

이것을 불변모델 즉 1Way라 한다.

 

수정된 값을 business logic에 반영하는 행위(action)를 dispatch가 수행한다.

 

그다음은 Redux에 대한 설명이다.

기술은 왼쪽에서 오른쪽으로 발전되어왔는데, 

anguarjs에서 data와 view를 보면 양방향인데, 즉 데이터가 바뀌면 자동으로 view가 바뀐다. 이것을 2-way라 한다.

컴포넌트가 많아지면서 2-way 방식에 대한 성능 문제가 발생했고, 

이것을 제거한 React가 나와서 사용하고 있다.

React와 Redux는 별개인데, React를 사람들이 많이 사용하니, 이것에 맞게 redux/toolkit를 만들었고,

우린 이것을 사용한다.

 

Functional Programming(코딩 방법론)

변수가 없는 프로그래밍 방법(상수)

redux에서 위 개념(사상)을 많이 차용함

redux 이후에 나온 많은 상태관리 라이브러리(jotai, recoil, zustand)들도 redux와 비슷한 개념

cf) 명령형 프로그래밍

 

• Redux
  • dispatch
    • dispatch 함수 호출 시, reducer 호출 가능
      • action이라는 인자의 형태로 dispatch에게 전달하면, 이를 바탕으로 reducer 함수를 호출하고, reducer의 리턴값을 바탕으로 store 값 수정
      • action 인자의 조건 - 객체여야 하고, type을 가져야 함
      • type 의 값은 문자열인데, 이 문자열들을 어떤 return 값을 가질지 판별해주는 역할을 함

사용 방법은 https://ko.redux.js.org/introduction/getting-started

공식 홈페이지를 보면 알 수 있다.