2022-01-16 TIL

Fact

• 하루종일 리덕스만 공부했다.. 음악앱 과제에 리덕스를 추가하는게 이렇게 어렵다니.. 벨로퍼트님 블로그를 참고했는데 리팩토링까지 참고하려다보니 공부하는 시간이 좀 길어졌다..
• 프로그래머스 데브코스 프론트엔드가 열렸다 얼른 신청해야지

Feelings

• 언젠간 공부해야할 리덕스였는데, 역시 따라치면서 공부하고 내 프로젝트에 적용해보는게 최고의 공부방법인 것 같다.

Findings

• 리덕스 공식문서에서는 리덕스 사용 시 따라야 할 세가지 원칙을 설명한다.

  1. 전체 상태값을 하나의 객체에 저장한다.
  2. 상태값은 불변의 객체다.
  3. 상태값은 순수 함수에 의해서만 변경되어야한다.
• 전체 상태값이 하나의 자바스크립트 객체로 표현되기 때문에 활용도가 높아진다. 리덕스를 사용하면 하나의 객체를 직렬화해서 서버와 클라이언트가 프로그램의 전체 상탯값을 서로 주고받을 수 있다. 프로그램이 특정한 상태에 있을 때 발생하는 버그를 확인하기 위해 그 상태값을 저장한 후 반복해서 재현 할 수 있다. 최근 상태값을 버리지 않고 저장해 놓으면 실행 취소와 다시 실행 기능을 쉽게 구현할 수 있다. 하지만 애니메이션을 위한 데이터나 문자열 입력창의 현재 상태값은 컴포넌트에서 관리하는게 더 나을 수 있다. 프로그램의 일부 상태만 리덕스를 활용해도 된다.
• 상태값을 불변 객체로 관리한다.

const incrementAction = {
  type: 'INCREMENT',
  amount: 123,
}
const conditionalIncrementAction = {
  type: 'CONDITIONAL_INCREMENT',
  amount: 2,
  gt: 10,
  lt: 100,
}
store.dispatch(incrementAction)
store.dispatch(conditionalIncrementAction)

• 액션 객체는 type 속성값이 존재해야한다. type 속성값으로 액션 객체를 구분한다. type 속성값을 제외한 나머지는 상태값을 수정하기 위해 사용되는 정보다. 액션객체와 함께 dispatch 메서드를 호출하면 상태값이 변경된다. 리덕스의 상택밧을 수정하는 유일한 방법은 액션 객체와 함께 dispatch메서드를 호출하는 것이다. 다른 어떤 방법으로도 상태값을 수정하면 안된다.
• 오직 순수 함수에 의해서만 상탯값을 변경해야 한다. 리덕스에서는 상탯값을 변경하는 함수를 리듀서라고 부른다. 리듀서의 구조는 다음과 같다. (state, action) => nextState 리듀서는 이전 상태값과 액션 객체를 입력으로 받아서 새로운 상태값을 만드는 순수 함수다. 순수 함수는 부수 효과를 발생시키지 않아야 한다. 또한 순수 함수는 같은 인수에 대해 항상 같은 값을 반환해야 한다.

Future Action

• http, 네트워크 책 다시읽기