참고 링크

리덕스의 코드 및 원리 이해

Redux를 사용하는 이유

• 상태 관리를 컴포넌트에 종속시키지 않고 전역에서 관리함으로써 컴포넌트 계층에 관계없이 상태를 가져다쓸 수 있는 구조가 만들어짐
• React와 같은 단방향 Flux 패턴의 경우 props를 여러 컴포넌트를 거쳐 전달하는 과정에서 props drilling이 발생하는데, 이렇게 하면 매번 상태가 변해서 계속해서 re-rendering이 발생한다.

Flux 패턴과 MVC 패턴의 차이

기존에 보편적으로 사용되었던 MVC 패턴은 Model이 View를 반영하고 View가 Model을 변경하는 서로 간의 양방향 데이터 흐름으로 인해 각 Model에서 발생한 이벤트가 어떤 변화를 일으킬지에 대해 예측하기가 어렵다는 문제가 있었다.

그래서 facebook에서는 이러한 문제를 해결하기 위해 Flux 패턴을 만들었고 이로 인해 대규모 어플리케이션에서 보다 일관된 데이터 관리를 할 수 있게 되었다.

Redux의 개념

Action, Dispatch, Reducer, Store으로 구성된다.

Action

• 상태 변경 정보
• Action 생성 함수를 통해 만들어진 객체
• type: 발생한 상태 변경에 대한 네이밍 (required)
• payload: 상태 변경 시 필요한 데이터 (optional)

 <script>
    // 액션의 네이밍을 상수로 선언
    const CHANGE_NAME = 'CHANGE_NAME';
    
    const changeName = (newName) => { type: CHANGE_NAME, payload: newName }
  </script>

Dispatch

• Action 객체를 Reducer 함수에 전달
• 상태 변경을 발생시키는 유일한 방법

store.dispatch(actionChangeName(name));

예시

입력창에 입력된 이름을 Dispatch()메서드를 사용해서 상태 변경을 트리거하는 모습

  <script>
    Form();
    
    function Form() {
      document.querySelector('div').innerHTML = `
        <form>
          <p><input type="text" name="name" placeholder="바꿀 이름을 입력해주세요."></p>
          <p><button type="submit" value="수정"></p>
        </form>
      `;
    }
  </script>

Reducer

• Store의 상태를 업데이트하는 함수
• 이전 상태 값(state)과 액션 객체(action)을 전달 받아 변경된 상태 값을 만든다.
• state는 읽기 전용이므로, 직접적으로 수정하지 않고 spread 연산자 등을 사용하여 기존 값을 건드리지 않고 새로운 값으로 Store의 상태 값을 교체한다.

 <script>
	const initialState = { name: 'who are you' };
 
    const userReducer = (state = initialState, action) => {
      switch(action.type) {
        case CHANGE_NAME: {
          return {
            ...state,
            name: action.payload
          }
        }
        default:
          return state;
      }
    }
  </script>

Store

• 상태 값이 전역적으로 관리되는 공간
• 각 프로젝트의 Redux마다 딱 하나 있다.
• 세팅 코드는 간단 -- 메서드로 store를 생성하고 reducer 함수를 연결한다.

<script>
   const store = Redux.createStore(userReducer);
</script>

상태 값 가져다쓰기

여기는 바닐라 JS라서 store.getState() 메서드를 사용했는데 React에서 쓸 때는 useSelector 등의 hook이 있다.

function Title() {
   const { name } = store.getState();

   document.querySelector('h1').innerHTML = `
      <span>${name}</span>
   `;
}