Redux(리덕스),Redux-saga

junhyung kwon·2023년 2월 8일
0

Redux(리덕스)란?

  • JavaScript 상태관리 라이브러리
  • 데이터를 한곳에 집합시켜 데이터 사용 및 관리를 편리하게 만드는 라이브러리

Redux(리덕스) 사용하는 이유?

  • 폴더 구조를 짜게되면 수많은 컴포넌트들이 존재하는데 여기서 내가 필요한 데이터를 빠르고, 쉽게 꺼내 쓸수 있기 때문이다.
  • 쉽게 말하자면 컴포넌트 관리를 내부에서 복잡하게 관리하지 않고, 바깥에서 한곳에 모아놓고 관리를 하기때문이다. --> 리덕스 스토어에서 관리를 한다.

reducer

  • 리듀서는 액션의 type에 따라 변화를 일으키는 함수입니다. 즉 스토어에 상태값이 들어가기전 액션값에서 전탈된 'type'의 종류에 따라 어떤 상태값으로 스토어에 리턴될지 정하는 수입니다. 스토어를 만드는 함수인 createStore()의 첫번째 파라미터에 들어가며 리듀서의 첫번째 파라미터엔 초기 상태값과 두번째 파라미터엔 액션값을 넣어줍니다.
  • 리듀서 첫번째 파라미터에는 최초의 상태값이 무조건 정의되어야한다.

dispatch

  • 리덕스 스토리에 상태 업데이트를 요청하는 함수
  • dispatch를 사용할때는 type이 지정되어 있어야한다.

action

  • 액션 객체라고 말할수 있다.(전달될 데이터)
  • 규칙:객체로 이루어져 있어야 한다, Type 프로퍼티를 갖고 있어야 한다.
  • 상태가 바뀌면 listener가 호출되어 새로운 상태를 발견하고 리렌더링 시킨다.

Redus-saga

  • Redus는 동기적으로 데이터가 흘러간다. 그러나 웹은 언제나 비동기적으로 사용자의 경험을 높이는 것이 중요하다.
  • redux을 사용하면서 redux-saga도 동시에 사용함으로 비동기의 유연함도 같이 가져갈 수 있다. 그래서 효율적으로 사용할 수 있는것이 redux-saga이다.
  • 리덕스 사가(Redux Saga)는 애플리케이션에서 전적으로 부수 효과(Side Effect)만을 담당하여 처리합니다. 비동기 함수 호출 결과 데이터를 통해 성공, 실패 여부를 판단하고 상태를 업데이트시키는 등의 작업(Task)을 제어할 수 있으며, 스토어에 접근하거나 특정 액션(Action)을 디스패치(Dispatch) 하여 다른 사가함수를 실행시킬 수 있다.
profile
“Everything comes to him who hustles while he waits” 항상 최고가 되기 위해 꾸준히 노력하며 성장해 나아가는 Front-End 개발자 권준형입니다.

0개의 댓글