프론트엔드 정복하기

1. dispatch dispatch(loginUser(body)) .then(reponse=> { if(reponse.payload.loginSuccess){ props.history.push('/') }else{ alert('Error') } }) dispatch를 통해 body를 인자로, loginUser라는 action(function)을 취함 2. action(function) 선언 -user_action.js파일- import{ LOGIN_USER } from './types'; //types : type을 관리하는 파일 / user_reducer.js, user_action.js 모두 types.js에서 type을 import export function loginUser(dataToSubm..

1. useState/dispatch 불러오기 import React, { useState } from 'react' import React, { useDispatch } from 'react-redux' 2. state 선언하기 const [ state, setstate ] = useState (initialState) -state : state 명 입력 ( emial, password 등 상태가 변경되는 것들 / ex) input의 value값 ) -initialState : 해당 state의 처음 상태. ( "" 라고 하면 => 첫 화면에 email 란 = 공란 ) ***state명이 요소의 value에(ex. ) 입력되지 않아도 상관없다. 그저 onChange(submit 등) 함수와 연결되면 된..

*display : flex ; : float, inlin-block 등의 단점을 보완한 속성이다. : clear:both를 하거나, 여백을 걱정할 필요 없다. *justifyContent ( IE11 이상 지원 ) -속성값 -flex-start (컨테이너 시작 부분에 아이템 위치 / default 값) -flex-end (컨테이너 끝에 아이템이 위치) -center (컨테이너 중앙에 아이템이 위치) -space-between (아이템 세로열 간 사이에만 공백 존재) -space-around (아이템 세로열의 앞, 사이, 뒤 모두에 공백 존재) -initial (이 속성의 기본값으로 설정) -inherit (부모요소의 속성값 상속) *alignItems ( IE11 이상 지원) -stretch (플렉스 ..

Redux import 더보기 import React from 'react' import ReactDOM from 'react-dom' import {Provider} from 'react-redux' : 어플리케이션과 redux를 연결시킴 import {applyMiddleware} from 'redux' :store에 미들웨어를 적용시킴 import {createStore} from 'redux' : 스토어 생성 import promiseMiddleware from 'redux-promise' import {combineReducers} from 'redux' : 여러개의 reducer를 하나로 묶음 import { useState } from 'react' : state 관리 hook tool을 불..

// clinet/src/index.js import {Provider} from 'react-redux'; // 어플REDUX 연결 >> 아래에서 Provider로 App 감싸주기 import {applyMiddleware, createStore} from 'redux'; // STORE 미들웨어 연결 import promiseMiddleware from 'redux-promise'; import ReduxThunk from 'redux-thunk'; import Reducer from './_reducers'; const createStoreWithMiddleware=applyMiddleware(promiseMiddleware, ReduxThunk)(createStore) //스토어에서 promise..

1. Redux 란? Redux : a predictable state container for JavaScript apps. 상태 관리 라이브러리 React에는 대표적으로 >> Props vs State 개념이 있다. -Props 1) properties의 줄임말로 2) 컴포넌트 간(부모, 자식, 형제 등)에 소통할 때 Props가 있어야 한다. 3) 소통 방식 : 상하 : (부모자식 간에만 주고받을 수 있다.) 4) 부모 comp에서 설정하면 상속된 자식 compo에서 props의 설정을 바꿀 수 없다. -State 1) State으로 component 안에서 데이터를 전달한다. (부모, 자식 상관x, 전역) 2) 그냥 안에서 설정, 상태를 변경할 수 있다. 3) state이 변하면 re-render..