Web/REACT.JS

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

yarn add redux react-redux immutable redux-actions redux-pender axios react-router-dom --save 1. redux 상태관리 ex. bindActioncreators 2. react-redux 리액트 컴포넌트에서 리덕스를 더욱 간편하게 사용할 수 있다. ex. connect, provider 3. redux-actions redux사용시 간편하게 ex. createAction, handelActions 4. redux-pender 프로미스 기반 액션들을 관리하기 위한 미들웨어&도구 포함. 특히 action생성과 reducer에서의 처리과정이 간소화 된다. 5. immutable state를 업데이트 할때에는 state의 불변성을 유지시켜..

import { BrowserRouter, Route, Link } from 'react-router-dom' link? 타이핑을 대신해준다? 클릭하면 그 url과 enter를 같이 쳐준다 home tiger/name 이렇게하면 gpp를 대신 걍 눌러줌 타이핑 대용으로 쓴다. enter 필요없이! 저거 딱 누르면 저렇게 만들어준당~ 여기서

react-router-dom query-string 설치 yarn add react-router-dom query-string --save App.js 가셈 Root.js로바꾸셈 import { BrowserRouter } from 'react-router-dom' 이렇게하면 browserRouter 사용가능 그 밑에 App.js만드셈 함수형컴포넌트로 class Root extends Component { render() { return ( Root.js ); } } function App(props) { return ( App.js ); } function Bpp(props) { return ( Bpp.js ); } 이제부터 App는 route장비입니다 장비이름은 물논 Bpp도 마찬가지 import ..

css 할라고 npm install node-sass npm install open-color npm install sass-loader npm install classname npm install node-sass open-color sass-loader classnames --save //군데군데 쓰임 index.css를 .scss로 바꾸기 ~의 의미? install을 시키면 lib가 node_module에 전부 들어간다. open-color가 node에다가 자동으로 들어간다 index.scss @import '~open-color/open-color'; body { background: $oc-gray-1; margin: 0px; } main가서 h1태그 걸어라 a.scss파일 만들기 .Redbox..

import React, { Component } from 'react'; import { connect } from 'react-redux' //import Bpp from './bpp' //import Compo1 from './compo1' class App extends Component { render() { //console.log(`>>app render`) return ( {/* {this.props.num} bnt {this.props.age} bnt */} ---App.js--- button dec {this.props.num} ); } } class Com1 extends Component { render() { return ( com1 button ); } } export const..

클릭하면 숫자가 1씩 증가하는 것을 만들 예정이다. 총 5단계로 나뉘어진다. 일단 App.js에서 이루어진다. import React, { Component } from 'react'; class App extends Component { render() { console.log(`app .js `) return ( {this.props.num} bnt ); } } 이렇게 설정한다 App.js가 받은 props를 받아 사용하기때문에 h1태그에는 this.props.num을 넣어주어따. button을 누르면 onMyClick이 실행되고 h1의 num이 증가된다. 1. action 만들기 const actionTo = (dispatch)=>{ console.log(`action call`); return {..