본문 바로가기

react createStore2

[React] 리덕스(redux) 기능으로 데이터 관리하기 ③ 코드 분리 리덕스 첫 기초 포스팅에서는 개념을 파악하기 위해 모든 기능을 하나의 소스 코드에 넣었습니다. 즉 액션 정의, 리듀서 설정, 스토어 생성 등의 코드가 모두 한 곳에 있었습니다. 또한 하나의 리듀서를 사용하여 스토어 저장소도 나눠져 있지 않았습니다. 그래서 이번에는 코드를 분리하고 복수의 리듀서를 사용해 보겠습니다. 시간을 절약하기 위해 지난 시간에 했던 카운드 업 로직에 로그인 정보를 저장하는 정도의 기능을 추가하겠습니다. 아래 링크를 참고하세요~! [Web프론트엔드/리액트] - [React] 리덕스(redux) 기능으로 데이터 관리하기 ① 기초 먼저 액션을 분리해보겠습니다. src/components 폴더 안에 actions 폴더를 만들고 이하 두 개의 소스를 추가합니다. // ..\test_proje.. 2020. 10. 23.
[React] 리덕스(redux) 기능으로 데이터 관리하기 ① 기초 지난 시간에는 컨텍스트(context) 기능으로 데이터 관리하는 법을 배웠습니다. 컨텍스트가 작은 편의점 같은 존재라면 리덕스는 대형마트 같은 느낌입니다. 즉 리덕스는 강력한 기능만큼 복잡하고 까다로운 절차를 거쳐야 사용 가능합니다. 하지만 리덕스를 사용하면 통합적인 데이터 관리가 가능하기 때문에 꼭 알고 가야 하는 기능입니다. 그럼 설치부터 ㄱㄱ 명령 프롬프트에서 리덕스 관련 라이브러리 설치 > yarn add redux react-redux 첫 시간인 만큼 가볍게 접근해 보겠습니다. 컨텍스트가 공급자(provider)와 소비자(consumer) 개념으로 나뉘었다면 리덕스는 스토어(store), 리듀서(reducer), 액션(action)이 있습니다. 쉽게 설명하자면 스토어는 데이터 저장소이고 리듀서는.. 2020. 10. 16.