redux 썸네일형 리스트형 리덕스_10_게시글 상세내역 보기 2020/06/06 - [redux] - 리덕스_9_게시글 내용 보기 리덕스_9_게시글 내용 보기 2020/06/06 - [redux] - 리덕스_8_리스트 조회하기 리덕스_8_리스트 조회하기 망고플레이트를 예시로 사용해봅니다. https://www.mangoplate.com/ 망고플레이트: 나만의 맛집 검색 솔직하고 거짓없는 리뷰로 나 wastetime.tistory.com 1. foodAction.js를 만든다. 여기서 함수를 만들어준다. action 함수를 만들어서 쓰면 더 편하다. import {FETCH_FOOD_DETAIL} from "./types"; import axios from 'axios' export function fetchFoodDetail(no) { return function.. 더보기 리덕스_9_게시글 내용 보기 2020/06/06 - [redux] - 리덕스_8_리스트 조회하기 리덕스_8_리스트 조회하기 망고플레이트를 예시로 사용해봅니다. https://www.mangoplate.com/ 망고플레이트: 나만의 맛집 검색 솔직하고 거짓없는 리뷰로 나만의 맛집을 쉽고 빠르게 찾아보세요! www.mangoplate.com 1. 새 프로젝트를 wastetime.tistory.com 이 포스팅을 연결해서 작성합니다. 1. 이미지를 클릭하면 다음 창으로 넘어가게 하기 위해 Category.js에서 NavLink 를 import 한다. 이미지를 NavLink에 싸준다. m.cateno를 CateFood.js에서 받게 해주려면 App.js에서 /cate_food/:cno 라고 해주어야 한다. import React from .. 더보기 리덕스_8_리스트 조회하기 망고플레이트를 예시로 사용해봅니다. https://www.mangoplate.com/ 망고플레이트: 나만의 맛집 검색 솔직하고 거짓없는 리뷰로 나만의 맛집을 쉽고 빠르게 찾아보세요! www.mangoplate.com 1. 새 프로젝트를 만든다. package.json에 아래있는 것들을 추가한다. "express": "^4.17.1", "mongodb": "^3.5.8", "redux": "^4.0.5", "react-redux": "^7.2.0", "react-router": "^5.2.0", //페이지 넘길 때 사용 "react-router-dom": "^5.2.0", "redux-logger": "^3.0.6" //log 표시 할 떄 사용 "redux-thunk": "^2.3.0" //비동기일 때 사.. 더보기 리덕스는 무엇일까? redux - 기존 방식(트리구조)의 불편함을 없애기 위해 만들어 진 것 : state의 props를 계속 위에서 아래로 내려주어야 했다.(귀찮) : 필요한 값을 가져다 쓸 수 있게 되었다.(편리) - front에서 mvc 구조를 만드는 것. 구조) 순서대로 view - controller- model과 같음 **store 안에는 1. action 2. reduce 이렇게 2개를 알고 있어야 한다. **reducer는 여러개가 들어갈 수 있다. model 만들 때도 기능마다 하나씩 만들었으므로 동일하게 보면 된다. 여기서 변경된 state를 store에 있는 reduce로 보내줘서 변경되는 것이다. 즉, action과 reduce만 있으면 된다. **state가 변경되었을 때 view에서 store로 d.. 더보기 리덕스 _ 환경설정 * 리액트 - 사용자 인터페이스 (화면UI)를 위한 자바스크립트 라이브러리 - 매우 단순하다. (class => function화 되면서 더 단순화 됨) - class 형태로 작성 시 코드가 길고 복잡하고 로직의 재사용이 어렵다(트리형식) * 리덕스 1. 패키지 제이슨 설치 "react-redux": "^7.2.0", "react-router-dom": "^5.2.0", "react-router": "^5.2.0", "redux": "^4.0.5", "redux-logger": "^3.0.6", "redux-thunk": "^2.3.0" 2. redux devtools 검색 3. 설치하면 f12누르고 옆에 리덕스가 추가되어있는 것을 알 수 있다. 더보기 이전 1 다음
