React # Redux

📝오늘 배운 내용

우리가 React를 사용해서 프로젝트를 만들 때 프로젝트의 규모가 점점 커질수록 자식으로 넘겨줘야 하는 props의 깊이도 점점 깊어질 것이다. 그렇게 되면 코드도 비효율적이고 유지보수하는 측면에서 불편함이 있는 것이 당연하게 된다. 그래서 우리가 원하는 state상태를 어디서든 사용할 수 있게 해주는 라이브러리가 있다. 그것이 바로 Redux이다.
Redux는 React안에 있는 라이브러리가 아니라 다른곳에서도 사용할 수 있는 상태관리 라이브러리이다.

Redux의 기본 개념 : 세 가지 원칙

- Single source of truth

• 동일한 데이터는 항상 같은 공간에서 데이터를 가지고 온다.
• 즉, 데이터를 저장하는 store라는 하나뿐인 공간이 있다.

- State is read-only

• action이라는 객체를 통해 state를 변경할 수 있다.

- Changes are made with pure functions

• 변경은 순수 함수로만 가능하다.

Store

• 상태가 관리되는 오직 하나의 공간
• 컴포넌트들에서 state 정보가 필요할 때 store에 접근을 해서 state 정보를 가져올 수 있다.

Action

• 자바스크립트 객체이다.
• store에게 앱의 데이터를 운반하는 역할을 한다.

{
  type: "ORDER",
  drink: {
    menu: "Americano",
	size: "Grande",
    iced: false
  }
}

Reducer

• Action에서 Store로 데이터를 운반하는데 Reducer를 거쳐야 한다.
• Action객체는 Dispatch에게 전달되고, Dispatch는 Reducer를 호출해서 새로운 state를 생성한다.

브라우저에서 +버튼을 클릭하는 이벤트가 발생하면 Dispatch의 전달 인자로 Action객체를 담아서 Reducer로 전달된다. Reducer는 Action객체의 타입에 따라서 다른 동작을 수행하게 된다. 그 동작의 수행 결과로 새로운 new state가 반환이 된다고 생각하면 되겠다.

Redux의 장점

• 상태를 예측 가능하게 만들어 준다.
• 유지보수에 좋다.
• 디버깅에 유리하다 (action과 state log 기록 시)
• 테스트를 붙이기 쉽다.