Redux 기초

생활코딩 Redux 강의를 듣고 공부하면서 정리해보았습니다.

🔹 Redux 란?

: JavaScript 상태관리 라이브러리로 중앙집중적인 데이터 스토어를 통해서 웹앱을 쉽게 개발할 수 있습니다.
즉, 웹앱의 복잡성을 크게 낮춰 코드가 어떤 결과를 가져올지 예측가능하게 만들어주는 도구라고 할 수 있습니다.

---

🔹 핵심원칙

• Single source of truth
  : Store는 단 하나이며, 모든 웹앱의 상태는 이 곳에 보관됩니다.

• Immutability
  : 상태(state)는 오로지 읽을 수만 있으며, 변경하려면 복제하여 상태 값을 사용합니다.

var newState;
if (action.type === "SELECT") {
  newState = Object.assign({}, state, {
    selected_id: action.id,
    mode: "read",
  });

• Pure function
  : 상태의 변경은 어떠한 사이드 이펙트도 만들지 않아야 합니다.

---

🔹 Redux 장점

• 코드가 어떤 상태 결과 값을 가져올지 예측 가능하게 만듭니다.

• redux dev tool 이라는 크롬 확장 기능을 통해 이전 state 값들을 확인할 수 있어 디버깅에 유리합니다.

• 복잡한 상태를 바꿀때 전문화된 함수를 이용하여 간단하게 구현 가능하다는 점에서 유지보수가 용이합니다.

---

🔹 Redux 관련 용어

• Action
  : 상태의 변화가 필요할 때 사용되는 객체로, 내부 형식은 자유롭게 표현하여 사용 가능합니다.(*type은 필수)

{
  type: 'CREATE',
  contents : [
    {id:1,title:'first'},
    {id:2, title:'second'}
  ],
...  
}

• Reducer
  : 새로운 state 값을 만들어주는 함수

// 현재의 state 값과 action 인자를 가진다.
const reducer = (state, action) => {
...
} 

• Store
  : 웹앱 전체의 상태를 보관하는 곳

• Subscribe
  : Store의 내장함수이며, 상태가 변경될 때마다 업데이트해주는 render 함수를 등록해 놓으면 state 값이 바뀔 때마다 render 함수가 호출되면서 ui가 새롭게 갱신됩니다.

store.subscribe(article);

• Dispatch
  : Store의 내장함수이며, action(객체)을 호출하면 Store는 리듀서 함수를 실행하여 state 값을 바꿉니다.

<input onclick="
  event.preventDefault()
  store.dispatch({type:'CHANGE_MODE', mode:'create'})
  " type="button" value="create" />

---

🔸 글을 마치며...

아직 리덕스를 왜 써야하는지 크게 와닿지 않지만 큰 프로젝트 경험을 하게 된다면 분명 필요성을 느낄 것이라는 생각이 듭니다.
또한 리덕스가 리액트와 단짝이라는 말을 들었는데 앞으로 React-Redux를 공부하면서 그 이유를 알아볼 예정입니다.