React (4) 썸네일형 리스트형 React-admin의 Redux, Saga를 이용한 Pagination(Route쓸때) https://marmelab.com/react-admin/ React-admin - Including the Admin in Another App Including React-Admin In Another Redux Application The tag is a great shortcut to be up and running with react-admin in minutes. However, in many cases, you will want to embed the admin in another application, or customize the admin redux store deeply. Tip marmelab.com 해당 API는 React의 App.js 내에서 파일을 만들고, 추가 기능들이 들어.. Redux_여러가지 Container 작성법 Redux Store와 연동되는 컴포넌트를 컨테이너 컴포넌트(Container Component)라 부른다. 여기 모든 container은 똑같이 작동한다. 1) 기본 component=Com1.js module=com1.js import React from "react"; import Com1 from "../components/Com1"; import { connect } from "react-redux"; import { increase, decrease } from "../modules/com1"; const Com1Container = ({ number, increase, decrease }) => { return ; }; const stateToProps = (state) => ({ numbe.. Redux_여러 개의 컴포넌트 여러 개의 컴포넌트를 각각 구동하게 하기 위해선 modules 폴더 안의 index.js를 만들어 combine 시킨 뒤 쓰면 된다. (또는 기존 src의 index.js 폴더 안에 넣어도 쓸 수 있다.) App.js import React, { Component } from "react"; import Com1 from "./components/Com1"; import Com2 from "./components/Com2"; class App extends Component { render() { console.log("App Call"); return ( ); } } export default App; components/Com1.js import React from "react"; import { c.. Redux_분류화 책에 맞춰서 ducks 방식으로 분류했다. Class형 Component를 사용했다. 함수형으로도 바꿀 수 있다. App.js // console 창에 어떤 순서로 실행하는지 파악할 것. import React, { Component } from "react"; import Com1 from "./components/Com1"; // const 선언 class App extends Component { render() { console.log("App Call"); return ( ); } } export default App; index.js import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import .. 이전 1 다음