리액트 리덕스5 [React] 리덕스(redux) 기능으로 데이터 관리하기 ⑤ 커넥트 지난 리덕스 세 번째 포스팅에서 코드 분리를 했습니다. 크게 액션과 리듀서로 나눴는데, 이번에는 커넥트(connect)를 사용하여 화면(view) 컴포넌트와 데이터(container) 컴포넌트로 분리해보겠습니다. 쉽게 말씀드리면 화면에 뿌려주는 재사용 가능한 컴포넌트에 리덕스 스토어 데이터를 연결하는 것입니다. 지난 시간에 했던 소스코드에서 분리하겠습니다. 2020/10/27 - [Web프론트엔드/리액트] - [React] 리덕스(redux) 기능으로 데이터 관리하기 ④ 해시맵 먼저 views폴더 안에 화면 컴포넌트를 만들겠습니다. 유저 데이터인 id, pass, name 그리고 수정 버튼입니다. // ..\test_project\src\components\views\UserDataView.jsx imp.. 2020. 10. 27. [React] 리덕스(redux) 기능으로 데이터 관리하기 ④ 해시맵 이때까지 네 번에 걸쳐 리덕스 관련 포스팅을 했습니다. 기초, 디버깅, 코드 분리까지 어느 정도 리덕스 기능을 사용할 수 있지만, 문제는 어떤 데이터를 담아서 어떻게 사용하는 야입니다. 그래서 이번에는 key값과 object를 사용한 해시맵 구조를 담아보겠습니다. id, pass, name 정도의 유저 데이터를 관리하는 예시로 진행하겠습니다. 먼저 액션 추가 ㄱㄱ~ 2020/10/16 - [Web프론트엔드/리액트] - [React] 리덕스(redux) 기능으로 데이터 관리하기 ① 기초 2020/10/22 - [Web프론트엔드/리액트] - [React] 리덕스(redux) 기능으로 데이터 관리하기 ② 디버깅 2020/10/23 - [Web프론트엔드/리액트] - [React] 리덕스(redux) 기능으로 데.. 2020. 10. 27. [React] 리덕스(redux) 기능으로 데이터 관리하기 ③ 코드 분리 리덕스 첫 기초 포스팅에서는 개념을 파악하기 위해 모든 기능을 하나의 소스 코드에 넣었습니다. 즉 액션 정의, 리듀서 설정, 스토어 생성 등의 코드가 모두 한 곳에 있었습니다. 또한 하나의 리듀서를 사용하여 스토어 저장소도 나눠져 있지 않았습니다. 그래서 이번에는 코드를 분리하고 복수의 리듀서를 사용해 보겠습니다. 시간을 절약하기 위해 지난 시간에 했던 카운드 업 로직에 로그인 정보를 저장하는 정도의 기능을 추가하겠습니다. 아래 링크를 참고하세요~! [Web프론트엔드/리액트] - [React] 리덕스(redux) 기능으로 데이터 관리하기 ① 기초 먼저 액션을 분리해보겠습니다. src/components 폴더 안에 actions 폴더를 만들고 이하 두 개의 소스를 추가합니다. // ..\test_proje.. 2020. 10. 23. [React] 리덕스(redux) 기능으로 데이터 관리하기 ② 디버깅 리덕스 관련 두 번째 포스팅입니다. 지난 시간에는 리덕스의 간략한 개념과 사용 방법을 알아봤었는데, 리덕스를 사용하면 통합적인 데이터 관리가 가능하다고 했습니다. 하지만 단지 데이터 관리 기능만이라면 이렇게 주목받거나 어려운 기능은 아니었을 것입니다. 그래서 오늘은 정말 강력한 기능인 리덕스 디버깅을 배워보도록 하겠습니다. 크롬 브라우저를 기준으로 설명드리겠습니다. 먼저 리덕스 크롬 확장 도구를 설치하기 위해 구글에 검색으로 'chrome redux devtools' 를 찾거나, 아니면 chrome 웹 스토어에서 'Redux DevTools' 를 검색해 설치합니다. 설치가 완료되면 명령 프롬프트에서 리덕스 개발자 확장 라이브러리를 추가합니다. > yarn add redux-devtools-extensio.. 2020. 10. 22. [React] 리덕스(redux) 기능으로 데이터 관리하기 ① 기초 지난 시간에는 컨텍스트(context) 기능으로 데이터 관리하는 법을 배웠습니다. 컨텍스트가 작은 편의점 같은 존재라면 리덕스는 대형마트 같은 느낌입니다. 즉 리덕스는 강력한 기능만큼 복잡하고 까다로운 절차를 거쳐야 사용 가능합니다. 하지만 리덕스를 사용하면 통합적인 데이터 관리가 가능하기 때문에 꼭 알고 가야 하는 기능입니다. 그럼 설치부터 ㄱㄱ 명령 프롬프트에서 리덕스 관련 라이브러리 설치 > yarn add redux react-redux 첫 시간인 만큼 가볍게 접근해 보겠습니다. 컨텍스트가 공급자(provider)와 소비자(consumer) 개념으로 나뉘었다면 리덕스는 스토어(store), 리듀서(reducer), 액션(action)이 있습니다. 쉽게 설명하자면 스토어는 데이터 저장소이고 리듀서는.. 2020. 10. 16. 이전 1 다음
