React_lib 제공 method 모음

 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을 불러옴

import { useDispatch } from 'react-redux'     : 'dispatch'를 이용해 action을 취함 (redux flow 참조)

import { withRouter } from 'react-router-dom'     : props.history.push 하기 위해 필요함

import { useSelector } from 'react-redux'     : state 정보를 가져옴

 

 .render ( <App /> , document.getElementById('root') ) 

: 괄호 안의 내용을 렌더링함

: 클래스 컴포넌트에서 반드시 구현돼야 하는 메서드

 

 <App /> 

: 컴포넌트

 

 applyMiddleware () 

: 괄호 안의 middleware를 적용시킴

: redux 메서드

 

 const rootReducer = combineReducers ({}) 

: 여러가지 Reducer를 하나로 묶어줌

: redux 메서드

 

 

 

const  dispatch  = useDispatch()

dispatch . (action명 (인자) )

 

: dispatch를 통해 action을 취함

: redux 메서드

 

import { withRouter } from 'react-router-dom'   (withRouter를 import 하고,)

export default withRouter(RegisterPage)   (withRouter로 감싼 페이지 내에서 다음 메소드를 사용할 수 있다.)

 props.history.push('/login') 

: react에서는 홈페이지를 이동할 때 위 메서드를 사용한다.

: 엔드포인트 페이지로 돌아가기

 

 props.history.replace('/') 

: replace를 push로 바꿨을 때 차이점은 처음에 실행했을 때는 알 수 없다.

하지만 버튼을 여러번 눌러본 뒤, 브라우저의 뒤로가기를 눌러보라.

replace는 버튼을 누르기 전으로 되돌아가지만, push는 이전 버튼을 누르기 전으로 돌아간다.

즉, history를 가지고 있는가 없는가의 차이다.

 

ex) 로그인 후 뒤로가기 했을 때 : push->로그인페이지, 로그인을 시도했던 item이 보임

replace -> items의 히스토리 위치가 login으로 대체됨 / 로그인페이지로 돌아감

https://medium.com/w-bs-log/history-push%EC%99%80-replace%EC%9D%98-%EC%B0%A8%EC%9D%B4-ed5f2f7db7dc

 

 

 .then ( funciton(response) ) 

 

 rfce / rcc 

:   functional components 생성 / class components 생성

 

 

 

-useSeletor Document-

 const A = useSelector( function, deps ) 

: redux STORE에 접근한다.

 

-function

  1) 단수 ex) const counter = useSelector(state => state.counter, [ ]);

  2) 복수 가져올 때 ex) const { a, b } = useSelector(state => ({ a: state.a, state.b }), [ ])

 

- deps ; array 형태

 : 어떤 값이 바뀌었을 때 selector를 재정의할 지 설정

 : deps 값을 생력하면 렌더링될 때마다 selector 함수도 새로 정의됨

 : 최적화를 신경쓴다면 다음과 같이 입력해도 됨. useSelector ( function, [ ] )

 : useEffect 끝의 [ ] 와 비슷함. 

 

참고사이트

https://velog.io/@velopert/react-redux-hooks

 

 

-useSeletor 응용-

 import { useSelector } from 'react-redux' 

 const user = useSelector( state => state.user ) 

: react-redux의 state에서 state의 user 정보를 가져옴  (redux 개발자도구의 state 탭에 있음)

 

 

 const a = Math.floor( ) 

: 소수점 이하를 '버림' 한다.

( Math.ceil : 소수점 이하 '올림' / Math.round : 소수점 이하 '반올림' ) 

: javascript

 

 

 props.match.params.videoId 

: props.match >> route 정보를 가져옴    //  .params.videoId로 [ 동적 ID ]를 가져옴

 

---

 localStorage.getItem(key) 

: Storage에서 key에 해당하는 값을 받아온다.

 

ex) localStorage.getItem('userId')

*** App.js에 Compo로 연결된 Page에서 getItem 할 것. (그 외 js파일은 별다른 Page가 아니므로.)

 

* 그 밖에 Storage 관련 method : setItem(key, value) / removeItem(key) / clear() / key(index) / length

https://ko.javascript.info/localstorage

 

• setItem(key, value) – 키-값 쌍을 보관합니다.
• getItem(key) – 키에 해당하는 값을 받아옵니다.
• removeItem(key) – 키와 해당 값을 삭제합니다.
• clear() – 모든 것을 삭제합니다.
• key(index) – 인덱스(index)에 해당하는 키를 받아옵니다.
• length – 저장된 항목의 개수를 얻습니다.

---

 

 push( ) 

: array.prototype 메서드

: 하나 이상의 요소를 배열의 가장 마지막에 추가한다.

: 원본 배열은 추가한 요소의 수만큼 길이(length)가 늘어나게 되며, 요소를 성공적으로 추가하면 배열의 총 길이를 반환.

 

 concat() 

: array.prototype 메서드

: 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환

 

ex)

const array1 = [ 'a' ]

const array2 = [ 'b' ]

const array3 = array1 . concat ( array2 )

 

array3 >> [ 'a', 'b' ]