[NNN]_Redux 원리

Redux 의 필요성

요즘 웹 애플리케이션은 복잡한 상태 관리를 필요로 합니다. 

리액트에서는 여러 컴포넌트 간의 상태 공유, 비동기 작업, 사용자 입력 등 다양한 요소들을 효과적으로 관리하기 위해서는 강력한 상태 관리 도구를 필요로 하죠. 리덕스를 이런 문제들을 해결하기 위해 등장한 상태 관리 라이브러리 중 하나입니다.

 

 

단일 상태 트리

• 동일한 데이터는 항상 같은 곳에서 가져 옵니다.
• 때문에 스토어(Store) 라는 하나뿐인 데이터 공간이 있습니다.

 

리덕스는 애플리케이션의 상태를 하나의 큰 객체로 표현합니다. 이를 '단일 상태 트리' 라고 부르죠.

단일 상태 트리는 애플리케이션의 모든 상태를 하나의 JavaScript 객체에 저장합니다. 이 객체는 애플리케이션 전체에서 전역적으로 접근할 수 있습니다. 즉, 자주 필요로 하는 데이터(회원정보)를 조회하기 위해 각 컴포넌트에서 서버와 통신하는 코드를 매번 작성했더라면, 서버에서 한 번 받아둔 데이터를 중앙 Store 에 저장해 서버통신작업 없이 각 컴포넌트에서 원하는 데이터를 조회, 저장, 삭제, 수정할 수 있는 거죠.

 

 

Store, Action, Reducer 의 의미와 특징

지금부터는 리덕스를 좀 더 이해하기 위해 스토어, 액션, 리듀서에 대해 설명해보겠습니다.

 

Store(스토어)

Store(스토어) 는 사애가 관리되는 오직 하나의 공간입니다.

• 컴포넌트와는 별개로 스토어라는 공간이 있어서 그 스토어 안에 앱에서 필요한 상태를 담습니다.
• 컴포넌트에서 상태 정보가 필요할 때 스토어에 접근합니다.
• 주요 메서드
  • createStore(reducer) 로 Redux store 를 생성할 수 있습니다.
  • getState() 를 통해 현재 state 를 가져올 수 있습니다
  • dispatch(action) 을 사용해 store 의 reducetr 에 action 을 전달합니다. redux 에서 상태 변경을 일으킬 수 있는 유일한 방법입니다.

 

Action(액션)

Action(액션) 은 앱에서 스토어에 운반할 데이터를 말합니다. 즉 객체(Object)입니다.

• Simple JavaScript Object
• 두 가지 형태의 액션이 존재하는데,
  • type 만 있는 액션 { type: 'TEST' } (Action 에서 전달할 특별한 값이 없는 경우)
  • type 과 payload 가 있는 액션 { type: 'TEST', parms: 'hello' } (Action 에서 특별한 값을 전달해 활용해야 하는 경우)
  • type 은 필수 property 이고, String 입니다.
• 만들어진 Action 이 스토어에 전해 스토어의 상태를 변경하는 용도로 사용됩니다.

 

Reducer(리듀서)

Reducer(리듀서) 는 액션을 주면, 해당 액션이 적용돼 수정되거나 아닌 결과를 만들어주는 함수입니다.

• 리듀서는 현재의 상태와 액션을 받아 새로운 상태를 만들어냅니다.
• 리듀서는 순수 함수로 작성되어야 하며, 동일한 입력에 대해서는 동일한 출력을 반환합니다.
• Action(액션) 을 Store(스토어) 에 바로 전달하는 것이 아닙니다.
• Action(액션) 을 Reducer(리듀서) 에 전달해야 합니다.
• Reducer(리듀서) 가 주문(액션)을 보고 Store(스토어) 의 상태를 업데이트하는 것입니다.
• Action(액션) 을 Reducer(리듀서) 에 전달하기 위해서는 dispatch() 메소드를 사용해야 합니다.

 

 

요약해

즉, 리덕스의 원리는 Action(액션) 객체가 dispatch() 메소드에 전달되고, dispatch(액션) 을 통해 Reducer(리듀서) 를 호출합니다. Reducer(리듀서) 는 새로운 Store 를 생성합니다.