WoW 새로운 스킬 추가요~
리액트 함수와 클래스형에 대해서 배우고 State를 사용하는 법까지 익혔다. (아직 hook을 이용하는 방법은 익숙하지 않다. ... 지난주 HA까지는 클래스로 된것만 했기 때문이다. 🤓)
Redux를 이용하면 React를 사용하는데 더 편리하다고해서 기대중이다!

1.Redux

Redux는 우리가 지금까지 사용한 리액트 컴포넌트 내에서 상태를 쉽게 다루기 위해 사용하는 라이브러리이다.
(처음에 Redux는 React를 위한 수단이라고 생각했는데, 첫 스타트에서 알려주기를 React없이도 사용 할 수 있는, 상태관리 라이브러리 라고한다. 🤩)
리액트를 사용하면서 상태를 변경할때 자식 컴포넌트끼리 바로 상태를 전달 할 수 없기때문에 부모 컴포너트를 거쳐서 항상 전달 해야했다. 수업 내용 중에 간단한 구조면 문제없지만 복잡한 구조로 컴포넌트가 생성된다면 이렇게 상태를 전달하는것은 매우 복잡하고, 문제가 생겼을때 보수,유지가 힘들다고 했다.

그래서 사용할 것이 오늘 배운 Redux이다.

Redux에는 3가지 원칙이 있다.

1. Single source of truth
(동일한 데이터는 항상 동일한 곳에서 데이터를 가지고온다. Store라는 곳에서 가져온다.)

2. State is read-Only
(Redux에서는 Action이라는 객체를 가지고 State를 변경한다.)

3. Changes are made wiht pure functions
(변경은 순수 함수로만 가능하다. Reducer와 관련되어있다. )

2. Redux에서 필요한 개념

1. Store

상태가 관리되는 오직 하나의 공간!!
컴포넌트와 별개로 Store라는 공간을 두고 App에서 필요한 State정보를 두고 컴포넌트들이 정보를 가지고 감!

2. Action

자바스크립트의 객체!

Action객체는 Store에게 App의 데이터를 운반하는 역할을 한다.

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

타입을 저장해줘야하고 이후에 필요한 정보를 객체에 담아서 전달한다!! (예시코드 확인)

3. Reducer

현재 상태와 Action을 이용해 다음 상태를 만들어냄!

Action 객체는 Dispath에게 전달도고, Dispath는 Reducer를 호출해서 새로운 State를 생성!!
(이 문장을 지금은 암기하라고 한다 ㅎ.. 🥸)

이러한 공식들은 데이터가 한방향으로만 흘러야 하기때문에 적용되는 법칙이라고 한다!

4. Overview

Redux Cycle ...

3. Redux의 장점

1. 상태를 예측가능하게 만들어준다.

2. 유지보수에 용이하다
(복잡한 컴포넌트를 사용할때 버그를 찾을때는 관련된 모든 컴포넌트를 검사해야 하지만 Redux를 이용하면 Store를 검사해보면 되서 용이함!)

3. 디버깅에 유리하다 (action과 state log 기록시)

4. 테스트를 붙이기 쉽다.

마무리

React도 아직 익숙하지 않은 상태에서 Redux까지 ㅎ .. 걱정이되지만 이것을 이용하면 복잡한 state를 간편하게 이용할 수 있다고하니 개념에대해 숙지하고 스프린트를 통해서 React와 Redux를 익혀야겠다!
처음 배울때 느꼈던 불편한 점을 새로운 스킬을 배우면서 해결할 수 있는 방법들이 있다는게 신기하다.😘 역시 다양한 기술을 습득하면 웹개발에 더 유리하고 내가 작업할때도 편할 것 같다는 생각이 계속든다.
DOM과 Javascript를 이용해서 웹을 만들던게 익숙했지만 얼른 이것에 익숙해져서 나도 손쉽게 웹애플리케이션을 제작하고싶다