IT_susu

미들웨어란? 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업들을 실행하는 것. 리듀서는 순수함수로 관리되므로 그 외의 사이드 이펙트를 처리하는 데 도움이 됨. 액션 -> 미들웨어 -> 리듀서 -> 스토어

1. ui와 연결하기 위해서 react-redux의 connect로 감싸줌. - state와 dispatch 연결 mapStateToProps : store에 있는 state를 props로 연동해준다. mapDispatchToProps: dispatch 함수를 props로 연동해준다. 2. bindActionCreators로 dispatch 함수 리턴하는 부분을 편리하게 써줄 수도 있지만 최종판은 아래와 같다 export default connect( (state) => ({ number: state.test.number, }), { increase, decrease, }, )(Login); 리덕스 더 편하게 사용하기 1. redux-actions action creators 의 변화 // before ..

src/index.js 에서 1. store 생성 createStore로 스토어 만듦 2. provider 컴포넌트로 프로젝트에 리덕스 연결 3. redux devTools의 설치 및 적용

전역적으로 사용할 데이터가 있을 때 유용한 기능 1) context 만들기 createContext함수를 이용해 생성. 인자값으로 기본 상태 지정. import { createContext } from 'react'; const ColorContext = createContext({ color: 'black' }); export default ColorContext; 2) consumer context를 사용하는 곳. render props 형태로 넘겨야 함 import React from 'react'; import ColorContext from '../contexts/color'; const ColorBox = () => { return ( { value => ( ) } ) } export defa..

1. URL 파라미터와 쿼리 사용법 1) URL 파라미터 URL이 /profile/sujeong과 같은 형식으로 이루어 진 것. match.params를 사용하여 URL에 있는 파라미터를 가져올 수 있다. import React from 'react'; const Profile = ({ match }) => { const { username } = match.params; } // App.js 2) URL 쿼리 URL이 /about?detail=true 와 같은 형식으로 이루어진 것. location.search을 사용하여 가져올 수 있다. 가져온 값은 문자열이다. 문자열은 값을 사용하기 불편하므로 qs 등의 라이브러리를 이용하여 문자열을 객체로 변환 후, 사용한다. 그러나 쿼리의 파싱 결과 값도 문자열..

application에 선언적이고 접근 가능한 탐색 기능 제공 페이지를 새로 불러오지 않고 애플리케이션은 그대로 유지한 상태에서 HTML5 History API를 사용하여 페이지의 주소만 변경. 1) to :string - 위치의 pathname, search, hash properties를 string으로 연결 :object - 다음 속성 중 하나를 가지고 있는 객체 pathname: 현재 path search: 쿼리 파라미터 표현(?...) hash: 해시 파라미터 표현(#...) state: location의 지속되는 상태 :function - location이 파라미터로 전달되고 location 표현을 문자열 또는 객체로 리턴하는 함수 ({ ...location, pathname: "/course..

- 정의 : location이 route의 path와 일치하면 렌더링하는 요소 - path 현재 위치의 pathname입니다. 일치하면 해당하는 컨텐츠를 렌더링하고, 맞지 않으면 null을 렌더링합니다. 하나의 컴포넌트에 여러개의 path를 연결하려면 배열로 값을 넘겨주면 됩니다.(리액트라우터v5이상~) path가 없으면 항상 일치합니다. - exact true이면 location.pathname과 정확히 일치해야만 인정합니다. - strict true면, 슬래시가 있는 경로는 슬래시가 있는 location.pathname과 일치해야만 인정합니다. location에 추가 url 세그먼트가 있는 경우에는 동작하지 않습니다. - sensitive true면, 대소문자를 구별합니다. - route가 컴포넌트를..

BrowserRouter - 정의 : HTML5 history API를 사용하는 라우터. - props basename : 모든 위치의 기본 URL getUserConfirmation : 탐색할 때 쓴다는데.. forceRefresh : true인 경우 페이지 탐색 시 전체 페이지 새로고침. html5 history api 지원하지 않는 브라우저에서 사용. keyLength : location.key의 길이 HashRouter - 정의 : hash를 사용하여 ui와 url을 동기화하는 라우터. 라이브러리에서 비추. NativeRouter - 정의 : React Native에서 사용하는 app 개발용. MemoryRouter - 정의 : URL 기록을 메모리에 유지하는 라우터. 테스트 및 react nat..

react web app에서 router를 이용해 페이지를 이동해보자. 라우터를 사용하기 위해서는 3개의 컴포넌트가 필요합니다. 1. router 컴포넌트 2. route 매칭 컴포넌트 3. navigation 컴포넌트 1. Router 연결 컴포넌트 router란 다수의 네트워크를 연결하는 요소. BrowserRouter, HashRouter... import { BrowserRouter } from "react-router-dom"; ReactDOM.render( , holder ); 2. route 매칭 컴포넌트 경로와 해당 컴포넌트를 매칭 시켜주는 요소. route, switch... 3. navigation 이동 컴포넌트 다른 주소로 이동시켜주는 요소. Link, NavLink... 코드 스플리..