귤귤의 대모험

Clipboard Events

이벤트 이름 :onCopy , onCut, onPaste

속성 : DOMDataTransfer clipboardData

Composition Events

이벤트 이름 : onCompositionEnd ,onCompositionStart, onCompositionUpdate

속성 : string data

Keyboard Events

이벤트 이름 :onKeyDown, onKeyPress, onKeyUp

속성 :

boolean altKey

number charCode

boolean ctrlKey

boolean getModifierState(key)

string key

number keyCode

string locale

number location

boolean metaKey

boolean repeat

boolean shiftKey

number which

이 key속성은 DOM Level 3 Events spec에 설명 된 값 중 하나를 사용할 수 있습니다 .

Focus Events

이벤트 이름 :onFocus , onBlur

이러한 포커스 이벤트는 폼 요소뿐만 아니라 React DOM의 모든 요소에서 작동합니다.

속성 : DOMEventTarget relatedTarget

Form Events

이벤트 이름 : onChange, onInput, onInvalid, onSubmit

onChange 이벤트에 대한 자세한 정보는 양식을 참조하십시오 .

Mouse Events

이벤트 이름 :

onClick, onContextMenu, onDoubleClick, onDrag, onDragEnd, onDragEnter, onDragExit,

onDragLeave, onDragOver, onDragStart, onDrop, onMouseDown, onMouseEnter, onMouseLeave,

onMouseMove, onMouseOut, onMouseOver, onMouseUp

onMouseEnter및 onMouseLeave이벤트는

하나가 아닌 일반 버블의 입력되는 왼쪽이 되는 요소로부터 전파하고 캡처 단계가 없습니다.

속성 :

boolean altKey

number button

number buttons

number clientX

number clientY

boolean ctrlKey

boolean getModifierState(key)

boolean metaKey

number pageX

number pageY

DOMEventTarget relatedTarget

number screenX

number screenY

boolean shiftKey

Pointer Events

이벤트 이름 :

onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onGotPointerCapture,

onLostPointerCapture, onPointerEnter, onPointerLeave, onPointerOver, onPointerOut

onPointerEnter및 onPointerLeave이벤트는 하나가 아닌 일반 버블의 입력되는 왼쪽되는 요소로부터 전파하고 캡처 단계가 없습니다.

속성 :

W3 spec에 정의 된대로 포인터 이벤트 는 다음 속성을 사용하여 마우스 이벤트 를 확장 합니다.

number pointerId

number width

number height

number pressure

number tangentialPressure

number tiltX

number tiltY

number twist

string pointerType

boolean isPrimary

브라우저 간 지원에 대한 참고 사항 :

포인터 이벤트는 모든 브라우저에서 아직 지원되지는 않습니다

(이 기사를 작성할 당시 지원되는 브라우저에는 Chrome, Firefox, Edge 및 Internet Explorer가 포함됨).

표준 준수 폴리 필이의 번들 크기를 크게 늘리기 때문에

React는 의도적으로 다른 브라우저에 대한 지원을 폴리 필하지 않습니다 react-dom.

응용 프로그램에 포인터 이벤트가 필요한 경우 타사 포인터 이벤트 폴리 필을 추가하는 것이 좋습니다.

Selection Events

이벤트 이름 : onSelect

Touch Events

이벤트 이름 : onTouchCancel onTouchEnd onTouchMove onTouchStart

속성 :

boolean altKey

DOMTouchList changedTouches

boolean ctrlKey

boolean getModifierState(key)

boolean metaKey

boolean shiftKey

DOMTouchList targetTouches

DOMTouchList touches

UI Events

이벤트 이름 : onScroll

속성 :

number detail

DOMAbstractView view

onScroll

이벤트 이름 : onWheel

속성 :

number deltaMode

number deltaX

number deltaY

number deltaZ

Media Events

이벤트 이름 :

onAbort, onCanPlay, onCanPlayThrough, onDurationChange, onEmptied, onEncrypted,

onEnded, onError, onLoadedData, onLoadedMetadata, onLoadStart, onPause, onPlay,

onPlaying , onProgress, onRateChange, onSeeked, onSeeking, onStalled, onSuspend,

onTimeUpdate, onVolumeChange, onWaiting

Image Events

이벤트 이름 :onLoad, onError

Animation Events

이벤트 이름 : onAnimationStart, onAnimationEnd, onAnimationIteration

속성 :

string animationName

string pseudoElement

float elapsedTime

Transition Events

이벤트 이름 : onTransitionEnd

속성 :

string propertyName

string pseudoElement

float elapsedTime

Other Events

이벤트 이름 :onToggle

import _ from 'lodash' // https://lodash.com/docs/4.17.15 확인하자 라이브러리
import * as types from '../action/ActionTypes';

const initialState={
    currentMenuName: '',

};


const menuListReducer = (state=initialState, action) => {
    switch (action.type) {
        case types.MENU_ALL_LIST:
            return {
                ...state,
                menuList: action.menuList
          }
        case types.MENU_HR_LIST:
            return {
                ...state,
                menuList: [_.mapKeys(action.menuList, 'menuCode').HR00]
          }
        case types.MENU_ACCOUNT_LIST:
            return {
                ...state,
                menuList: [_.mapKeys(action.menuList, 'menuCode').ACC00]
          }
        case types.MENU_LOGI_LIST:
            return {
                ...state,
                menuList: [_.mapKeys(action.menuList, 'menuCode').LOGI00]
          }
        default:
            return state;
    }
}
export default menuListReducer;

Clipboard Events

이벤트 이름 :onCopy onCut onPaste

속성 : DOMDataTransfer clipboardData

Composition Events

이벤트 이름 : onCompositionEnd onCompositionStart onCompositionUpdate

속성 : string data

Keyboard Events

이벤트 이름 :onKeyDown onKeyPress onKeyUp

속성 :

boolean altKey

number charCode

boolean ctrlKey

boolean getModifierState(key)

string key

number keyCode

string locale

number location

boolean metaKey

boolean repeat

boolean shiftKey

number which

이 key속성은 DOM Level 3 Events spec에 설명 된 값 중 하나를 사용할 수 있습니다 .

Focus Events

이벤트 이름 :onFocus onBlur

이러한 포커스 이벤트는 폼 요소뿐만 아니라 React DOM의 모든 요소에서 작동합니다.

속성 : DOMEventTarget relatedTarget

Form Events

이벤트 이름 : onChange onInput onInvalid onSubmit

onChange 이벤트에 대한 자세한 정보는 양식을 참조하십시오 .

Mouse Events

이벤트 이름 :

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit

onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave

onMouseMove onMouseOut onMouseOver onMouseUp

onMouseEnter및 onMouseLeave이벤트는

하나가 아닌 일반 버블의 입력되는 왼쪽이 되는 요소로부터 전파하고 캡처 단계가 없습니다.

속성 :

boolean altKey

number button

number buttons

number clientX

number clientY

boolean ctrlKey

boolean getModifierState(key)

boolean metaKey

number pageX

number pageY

DOMEventTarget relatedTarget

number screenX

number screenY

boolean shiftKey

Pointer Events

이벤트 이름 :

onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture

onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut

onPointerEnter및 onPointerLeave이벤트는 하나가 아닌 일반 버블의 입력되는 왼쪽되는 요소로부터 전파하고 캡처 단계가 없습니다.

속성 :

W3 spec에 정의 된대로 포인터 이벤트 는 다음 속성을 사용하여 마우스 이벤트 를 확장 합니다.

number pointerId

number width

number height

number pressure

number tangentialPressure

number tiltX

number tiltY

number twist

string pointerType

boolean isPrimary

브라우저 간 지원에 대한 참고 사항 :

포인터 이벤트는 모든 브라우저에서 아직 지원되지는 않습니다

(이 기사를 작성할 당시 지원되는 브라우저에는 Chrome, Firefox, Edge 및 Internet Explorer가 포함됨).

표준 준수 폴리 필이의 번들 크기를 크게 늘리기 때문에

React는 의도적으로 다른 브라우저에 대한 지원을 폴리 필하지 않습니다 react-dom.

응용 프로그램에 포인터 이벤트가 필요한 경우 타사 포인터 이벤트 폴리 필을 추가하는 것이 좋습니다.

Selection Events

이벤트 이름 : onSelect

Touch Events

이벤트 이름 : onTouchCancel onTouchEnd onTouchMove onTouchStart

속성 :

boolean altKey

DOMTouchList changedTouches

boolean ctrlKey

boolean getModifierState(key)

boolean metaKey

boolean shiftKey

DOMTouchList targetTouches

DOMTouchList touches

UI Events

이벤트 이름 : onScroll

속성 :

number detail

DOMAbstractView view

onScroll

이벤트 이름 : onWheel

속성 :

number deltaMode

number deltaX

number deltaY

number deltaZ

Media Events

이벤트 이름 :

onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted

onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay

onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend

onTimeUpdate onVolumeChange onWaiting

Image Events

이벤트 이름 :onLoad onError

Animation Events

이벤트 이름 : onAnimationStart onAnimationEnd onAnimationIteration

속성 :

string animationName

string pseudoElement

float elapsedTime

Transition Events

이벤트 이름 : onTransitionEnd

속성 :

string propertyName

string pseudoElement

float elapsedTime

Other Events

이벤트 이름 :onToggle

modules / counter.js

import { createAction, handleActions } from 'redux-actions';

const INCREASE = 'counter/INCREASE'; // action type를 변수에 저장하여 그 변수로 handleActions해준다!

const DECREASE = 'counter/DECREASE';

export const increase = createAction(INCREASE); // type이 지정된 변수를 careateAction()메소드를 활요하여 액션함수를 생성한다

export const decrease = createAction(DECREASE); // 이 액션함수는 사용할 클래스 내부에서 dispatch로 사용하게된다

const initialState = { // 리듀서

number: 0,

};

const counter = handleActions(

// 첫 번째 파라미터로는 액션에 따라 실행할 함수들을 가진 객체를 넣어주고,

// 두 번째 파라미터로는 상태의 기본 값( initialState )을 넣어준다.

{

[INCREASE]: (state, action) => ({ number: state.number + 1 }),

[DECREASE]: (state, action) => ({ number: state.number - 1 }),

},

initialState,

);

export default counter;

CounterContainer / contaiers.js

import React, { useCallback } from 'react';

import { useCallback, useDispatch } from 'react-redux';

import Counter from '../components/Counter';

import { increase, decrease } from '../modules/counter';

const CounterContainer = () => {

const number = useSelector(state => state.counter.number);  // mapStateToProps와 같은 기능이다

const dispatch = useDispatch();

const onIncrease = useCallback(() => dispatch(increase()), [dispatch]);

const onDecrease = useCallback(() => dispatch(decrease()), [dispatch]);

// useCallback()으로 최적화를 하여 dispatch되는 리듀스와 액션에 대한 state 객체가 변경이 있을 때만 함수가 재사용된다

// 위의 방법은 react-redux의 함수를 사용한 connect방법이다

return (

<Counter number={number} onIncrease={onIncrease} onDecrease={onDecrease} />

);

};

export default CounterContainer;

import React from "react";

import { HashRouter, Route, Switch, Redirect} from "react-router-dom";

// components

import Layout from "./RouteMenunComponents/Layout/Layout";

// pages

import Error from "../pages/error";

import LoginContainer from "../pages/login/LoginContainer";

const App = (props) => {

  // global

  const { isAuthenticated } = props

  return (

    <HashRouter>

      <Switch>

        <Route 

          exact 

          path="/" 

          render = {() => <Redirect to="/app/dashboard" />} 

        />

        <Route

          exact

          path="/app"

          render={() => <Redirect to="/app/dashboard" />}

        />

        <PrivateRoute path="/app" component={Layout} />

        <PublicRoute path="/login" component={LoginContainer} />

        <Route component={Error} />

      </Switch>

    </HashRouter>

  );

•   ========================================================================

PrivateRoute, PublicRoute는 권한을 가지고 있는 변수 값이 true false를 판별하여 그에 따른 값을 치환한다

  function PrivateRoute({ component, ...rest }) {

    return (

      <Route

        {...rest}

        render={props =>

          isAuthenticated ? (

            React.createElement(component, props)

          ) : (

            <Redirect

              to={{

                pathname: "/login",

                state: {

                  from: props.location,

                  explain: '로그인 인증 실패'

                },

              }}

            />

          )

        }

      />

    );

  }

•   ========================================================================

 function PublicRoute({ component, ...rest }) {

    return (

      <Route

        {...rest}

        render={props =>

          isAuthenticated ? (

            <Redirect

              to={{

                pathname: "/",

              }}

            />

          ) : (

            React.createElement(component, props)

          )

        }

      />

    );

  }

}

export default App;

redux-thunk는 기존 redux의 createStore에 applyMiddleware를 추가하여  action함수에서 dispatch를 하게 해 준다 

그 결과 밑에 로직처럼 axios를 사용하여 결과 값을 dispatch 한다

export const fetchPosts = () => async dispatch => {

  const response = await jsonPlaceholder.get('/posts');

  dispatch({ type: 'FETCH_POSTS', payload: response.data });

};

export const fetchUser = id => async dispatch => {

  const response = await jsonPlaceholder.get(`/users/${id}`);

  dispatch({ type: 'FETCH_USER', payload: response.data });

};

Provider의 property 값에 applyMiddleware 추가하여 선언한다

import { Provider } from 'react-redux';

import { createStore, applyMiddleware } from 'redux';

import thunk from 'redux-thunk';

import App from './components/App';

import reducers from './reducers';

const store = createStore(reducers, applyMiddleware(thunk));

ReactDOM.render(

  <Provider store={store}>

    <App />

  </Provider>,

  document.querySelector('#root')

);

그 이외 연결 및 사용방법은 기존 redux활용과 같다

밑의 url을 참고하자

https://tantangerine.tistory.com/3

react와 redux를 연결하는 방법을 간략하게 알아보고 이때 사용되는 react-reudx와 reducer의 관계를 알아보자

* 일단 변수명은 지금 로직과 관련이 없다는 것만 알고 다양한 연결방법과 쓰임새만 알고 가자

reuducer는 combineReducers를 활용하여 redux를 생성하게 되고 reducer의 return 값들은 redux의 값으로 활용된다

reducer/index.js

import { combineReducers } from 'redux';

const songsReducer = () => {

  return [

    { title: 'No Scrubs', duration: '4:05' },

    { title: 'Macarena', duration: '2:30' },

    { title: 'All Star', duration: '3:15' },

    { title: 'I Want it That Way', duration: '1:45' }

  ];

};

• ===============================================================

const selectedSongReducer = (selectedSong = null, action) => {

  if (action.type === 'SONG_SELECTED') {

    return action.payload;

  }

  return selectedSong;

};

export default combineReducers({

  songs: songsReducer,

  selectedSong: selectedSongReducer

});

• ===============================================================

reducer와 redux를 선언이 끝나면 redux에 값을 치환하기 위해서는 action함수를 선언한다

그리고 사용될 클래스 내에서 react-redux로  mapDispatchToProps를 활용하여

action함수와 reducer 를 Dispatch한다 그렇게 되면 action함수의 return 값이 reducer의 매개변수로 치환되어

redux값이 생성된다

actions/index.js

export const selectSong = song => {

  return {

    type: 'SONG_SELECTED',

    payload: song

  };

};

• ===============================================================

redux를 사용하기 위해서는 react-redux 라이브러리를 사용하여 redux와 react를 연결해야 한다

는 state와 ownProps를 사용하여 비교 분석하여 값 치환이 가능하다

state는 action함수를 실행시켜 reducer와 바인딩된 값을 가지고 있으며 그것을 사용하기 위해서는

mapStateToProps함수를 사용하여 현재 클래스와 connect를 해주어야 한다

ownProps는 부모 클래스에서 상속받아온 Props값을 나타낸다

아래의 코드는 action함수가 실행되고 나서 다른 클래스에서 reducer의 return값을 사용할 때

mapStateToProps함수를 현재 클래스와 connect 하는 것만으로 사용할 수 있게 된다

mapStateToProps함수에서 user에 값을 치환하여 클래스 내부에서 props로 받아서 사용이 가능하다

selectSong은 mapDispatchToProps함수를 통해 ation함수를 현 클래스의 property에 추가되어

props로 받아서 사용할 수 있다

이때 부모 컴포넌트에게 받아온 props값과 redux의 state값이 동시 추가되는 것을 확인할 수 있다

components/UserHeader.js

import { connect } from 'react-redux';

class UserHeader extends React.Component{

  ... 이하생략 

소스가 궁금하다면 url 확인하자

https://tantangerine.tistory.com/5?category=379283

}

const mapStateToProps = (state, ownProps) => {  

  return { user: state.users.find(user => user.id === ownProps.userId) };

};

export default connect(mapStateToProps,{ selectSong })(UserHeader);

• ===============================================================

Provider로 App 컴포넌트를 감싸게 되면  App 컴포넌트는 물론 하위 컴포넌트까지

store에 저장된 값을 사용할 수 있다 이때 저장되는 값은 redux로 combineReducers함수를 사용한 값이 된다

index.js

import React from 'react';

import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';

import { createStore } from 'redux';

import App from './components/App';

import reducers from './reducers';

ReactDOM.render(

  <Provider store={createStore(reducers)}> 

    <App/>

  </Provider>,

  document.querySelector('#root')

);

• ===============================================================