프론트엔드 정복하기

[ usestate 불러오기 > state 만들기(state, setState) > state 함수 선언하기 ] 까지 동일 [ submit(회원가입) 버튼 click 했을 때 ] [ 비밀번호 - 비밀번호 확인 일치하는지 확인하기 ] function onSubmitHandler { if (Password !== ConfirmPassword){ return alert ('비밀번호와 비밀번화 확인이 일치하지 않습니다.') }

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 등) 함수와 연결되면 된..

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..