React/Redux (Toolkit + Saga) (3) 썸네일형 리스트형 Redux Toolkit + Redux Saga 구조 만들어보기(3) - 전체 흐름 설명 내가 작성한 코드에서 검색버튼 이벤트가 발생한 후 흐름을 예를 들어서 설명을 해주겠다. 상단의 소스는 한 화면을 나타내는 소스이다. 이 화면에서 mainSearch() 이벤트가 Toolkit과 Saga를 이용하여 어떤식으로 흘러가는지 알아보자 1. [검색] 버튼을 클릭하게되면 SearchPanel의 mainSearch() 함수를 실행시킨다. 2. mainSearch()에서는 setParam() 를 실행하면서 param state값을 변경해주게 된다. 3. param값이 변경되고나면 param의 변경을 감지하고있는 useEffect(()=>{},[param])가 실행되고 slice에 정의해둔 (import { MasterStopCodeAction } from './slice') MasterStopCodeA.. Redux Toolkit + Redux Saga 구조 만들어보기(2) 설치를 했으면 구조를 만들어 보자 (설치 명령어는 이전 글에 있습니다.) [폴더 구조] 우선 디렉터리 구조를 보면 대표적으로 src/api/ src/components/ src/views/ viewName/ index.js slice.js saga.js src/store/ src/App.js src/index.js 이전에는 actions, reducers, constants 등 각 기능 별로 폴더를 나누었을 것이다. 그러나 redux-toolkit에 createSlice가 actions 와 reducer을 한 방에 만들어주면서 디렉터리 구조가 좀 더 보기 쉽게 구성이 가능해 졌다. 그리하여 views 에 한 화면당 폴더를 만들고(viewName) 그 폴더에 view파일(index.js) + slice(a.. Redux Toolkit + Redux Saga 구조 만들어보기(1) - 개념, 설치 [Redux Toolkit 이란?] 1. Redux Toolkit를 사용하는 이유 Redux Toolkit은 Redux를 더 사용하기 쉽게 만들기 위해 Redux에서 공식적으로 제공하는 개발도구 입니다. Toolkit 없이 Redux를 사용시 문제점 "Redux 저장소 구성이 너무 복잡합니다." "Redux가 유용한 일을하도록하려면 많은 패키지를 추가해야합니다." "Redux에는 너무 많은 상용구 코드가 필요합니다." Ex) --------------------------------------------------------------------------------------------------------------- 1개의 액션 생성을 하기위해선 [액션타입 정의 > 액션함수 생성 -> 리듀서 정의].. 이전 1 다음
