[React] 리덕스(Redux)

vanLan·2022년 12월 14일
0

React

목록 보기
11/11
post-thumbnail


🥇 리덕스(Redux)

  • 가장 많이 사용하는 리액트 상태 관리 라이브러리.
  • 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 관리.
  • 코드 유지 보수성도 높여주고 작업 효율도 극대화 해주기 때문에 프로젝트의 규모가 클 경우 유리함.
  • 편리한 개발자 도구도 지원, 미들웨어 기능을 제공하여 비동기 작업의 효율적인 관리를 도와줌.


🥈 리덕스 개념(중요 키워드)

📖 액션(action)

  • 상태에 어떠한 변화가 필요하면 객체로 표현되는 액션(action)이 발생.
  • 액션 객체는 type필드(액션의 이름)를 반드시 가지고 있어야 한다.
    그 외의 값들은 나중에 상태 업데이트를 할 때 참고해야할 값.
    
    {
      type: 'ADD_TODO',
      data: {
        id: 1,
        text: '리덕스 배우기'
      }
    }
    
    {
      type: 'CHANGE_INPUT',
      text: '안녕하세요'
    }

📖 액션 생성 함수

  • 변화를 일으켜야 할 때마다 액션 객체를 만들어야 하기 대문에 이를 함수로 만들어 관리.

    
    function addTodo(data) {
      return {
        type: 'ADD_TODO',
        data
      };
    }
    
    // 화살표 함수로도 생성 가능
    const changeInput = text => ({
      type: 'CHANGE_INPUT',
      text
    });

📖 리듀서(Reducer)

  • 변화를 일으키는 함수.

  • 액션을 만들어 발생시키면, 리듀서가 현재 상태전달받은 액션 객체를 파라미터로 받아 온 후 두 값을 참고하여 새로운 상태를 만들어 반환.

    
    const initialState = {
      counter: 1
    };
    
    function reducer(state = initialState, action) {
      switch(action.type) {
        case INCREMENT:
          return {
            counter: state.counter + 1
          };
        default:
          return state;
      }
    }

📖 스토어(store)

  • 프로젝트에 리덕스를 적용하기 위해 스토어를 만든다.
  • 한 개의 프로젝트는 단 하나의 스토어만 가질 수 있고, 스토어현재 애플리케이션의 상태리듀서를 포함하며 그 외에도 몇 가지 중요한 내장 함수를 지닌다.

📖 디스패치(dispatch)

  • 스토어내장 함수 중 하나이다.
  • '액션을 발생시키는 것'이라고 이해하면 된다.
  • dispatch(action)과 같은 형태로 action 객체파라미터로 넣어서 호출.
  • dispatch가 호출되면 스토어reducer 함수를 실행시켜 새로운 상태를 만들어 준다.

📖 구독(subscribe)

  • 스토어내장 함수 중 하나이다.

  • subscribe 함수 안에 리스너 함수파라미터로 넣어서 호출해 주면, action이 dispatch되어 상태가 업데이트 될때마다 이 리스너 함수가 호출된다.

    
    const listener = () => {
      console.log('상태가 업데이트 됨.');
    };
    
    const unsubscribe = store.subscribe(listener);
    
    unsubscribe();

🥈 리덕스의 세가지 규칙

📖 단일 스토어

  • 하나의 애플리케이션 - 하나의 스토어.
    (특정 업데이트가 빈번하게 일어나거나 애플리케이션의 특정 부분을 완전히 분리 시킬 때 여러개의 스토어를 만들 수도 있지만, 상태 관리가 복잡해질 수 있으므로 권장하지 않음)

📖 읽기전용 상태

  • 리덕스에서 상태는 읽기 전용.
    (React와 마찬가지로 상태를 업데이트할 때 기존의 객체는 건드리지 않고 새로운 객체를 생성해야 함)
  • 내부적으로 데이ㅓ가 변경되는 것을 감지하기 위해 얕은 비교(shallow equality) 검사를 하기 때문.

📖 리듀서는 순수한 함수

  • 리듀서 함수는 순수한 함수여야 한다.
    • 이전 상태와 액션 객체를 파라미터로 받는다.
    • 파라미터 외의 값에 의존하면 안된다.
    • 이전 상태는 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어 반환.
    • 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야 한다.


profile
프론트엔드 개발자를 꿈꾸는 이

0개의 댓글