Redux

Redux를 기존에 개념을 어느 정도 잡아두었다고 생각했지만,
조금 쳐지는 느낌이 있어 다시 개념을 잡기 위해 복습을 했다.

https://opentutorials.org/module/4078/24935
생활코딩님의 강의를 보며 다시 복습했으며
처음 프론트 개발을 시작하시는 분이 있다면 개념잡기에 대해서는 정말 좋습니다.

Redux는 상태 관리 라이브러리로 프론트엔드에서 제일 많이 사용하는 라이브러리다

Redux의 핵심은 Store이다.

Store는 대략적으로 보면 '배경'이라고 생각한다.
뒤 받침 하는 배경이 있기에 그 내부에 있는 것들이 작동한다는 느낌으로 생각하고 이해했다

Store 내부에는 state, reducer, dispatch, subscribe, getState가 있고

state는 store라는 배경에 있는 내부, 배경의 색상이라고 보면 나는 이해하기 쉬웠다.
즉, 상태이고 데이터이다

const store = Redux.createStore(reducer);

reducer는 state 값을 변경할 수 있는 함수로 store를 생성 시에 인자 값으로 무조건적으로 넣어줘야 한다. state 값을 변경하기 위해서는 reducer 함수를 통하여 변경해야 하며, 전달받는 매개변수로는 state(현재 state 값),action(dispatch로 전달받은 값)이고, 그 값을 토대로 코드를 작성합니다. state를 변경 시에는 직접적으로 state를 변경하는 것이 아닌, 얕은 복사로 state를 복사한 후 값을 변경하여 return 하거나, 객체를 return 하는 방법이 있다. 직접적으로 변경하게 되면 불변성의 법칙에 의해 좋지 않은 코드가 된다.

! reducer로 return 해주는 값은 state 값이 된다.

function reducer(state, action){
  if(state === undefined){
  return {...state , color: 'blue'};
  }
}
// state에 값이 없으면 state.color에 blue라는 string 값을 매긴다

dispatch는 reducer 함수를 불러내는 함수입니다.
이 또한 매개변수로 객체를 전달해 주어야 하며, { type , 변경할 state 값 } 을 전달해 주어야 합니다. type를 전달해 주는 것은 약속이다.

store.dispatch({type:'CHANGE_COLOR', color:'green'});

subscribe는 react로 따지자면 useEffect(()=>{},[state]) 와 같다.
state의 값이 변경되면 subscribe 함수에 전달된 콜백 함수가 실행된다.

store.subscribe(foo);

action은 매개변수라고 볼 수 있다. reducer에서 전달받는 매개변수로 dispatch로 reducer를 불러옴에 따라 전달하는 객체, 그게 action이라고 나는 이해했다.

그림에 따라 각 기능들의 설명을 하였는데, 까만 store 내부의 것들은 redux, 하얀 부분에 있는 것은 내 코드들, redux 외의 부분이다.

redux 관련된 글을 찾는 사람에게도 도움이 될 수 있는 글, 내가 생각을 정리하면서 써보는 글이다. 하지만 글로 적고 설명하는 것이 조금 어려운 점이 있는 것 같다.