융융이'Blog

match,location,history 리액트에서 각 컴포넌트에서 props처럼 받는 데이터가 match, location,history에 들어 있다. import React from 'react'; import queryString from 'query-string'; const About = ({location, match, history}) => { const query = queryString.parse(location.search); console.log(location); console.log(match); console.log(history); ... location {pathname: "/about", search: "?key=value&key2=value2"..

react-router-dom 리액트 경로 설정을 도와주는 패키지입니다. NODE_PATH 설정 import의 경로 설정을 절대경로로 변경을 해준다. package.json "scripts": { "start": "NODE_PATH=src react-scripts start", "build": "NODE_PATH=src react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, BrowserRouter BrowserRouter는 HTML5의 history API를 사용하여 새로고침하지 않고도 페이지 주소를 교체할 수 있게 합니다. import React from 'react'; import { B..

##Redux-thunk와 axios 사용 Action(module)에서 사용하는 API 를 정의(리덕하고 필요한 정보를 리덕스에 저장하고 화면에 뿌려준다. redux-promise-middleware redux-promise-middleware는 Promise 기반의 비동기 작업을 좀더 편하게 해주는 미들웨어 입니다. 현재 createAction을 이용하여 커스텀하도록 이용하는 것만 되는거 같다... 저만 에러뜨나요? ㅠㅠ yarn add redux-promise-middleware store.js import promiseMiddleware from 'redux-promise-middleware'; const pm = promiseMiddleware({ promiseTypeSuffixe..

##redux-logger yarn add redux-logger src/store.js import { createStore } from 'redux'; import modules from './modules'; import { applyMiddleware } from 'redux'; //미들웨어 적용하는 함수 이다. import { createLogger } from 'redux-logger'; const logger = createLogger(); const store = createStore(modules, applyMiddleware(logger)); export default store; createLogger를 통하여 미들웨어의 상태를..

immutable.js는 자바스크립트에서 불변성 데이터를 다룰 수 있도록 도와줍니다. immutable은 페이스북에서 json형태의 데이터를 변형하거나 값을 바꿀 때 유용하게 사용하기 위해서 만든 라이브러리이다. const { Map } =Immutable; let data = Map({ a: 1, b: 2, c: Map({ d: 3, e: 4, f: 5 }) }); let object1 = data.setIn(['c','d'], 10); console.log(object1.get('c').get('d')); // 10 console.log(data.get('c').get('d')); // 3 Map을 이용하여 데이터를..

리덕스는 리액트에서 상태를 더 효율적으로 관리하는 데 사용하는 상태관리 라이브러리입니다. 리액트는 다양한 컴포넌트의 집합체이며 상하위 관계를 유지하면서 앱을 구성하게 된다. 만약 child단에서 handling이나 state변화가 일어나면 최상위 APP을 거쳐서 child까지 전달하는 구조이기 때문에 앱의 효율성이 떨어진다. 리덕스를 이용한다면 위 그림과 처리하기 때문에 보다 효율적으로 프로젝트 관리가 편리하다. 스토어 : 애플리케이션의 상태 값들을 내장하고 있습니다. 액션 : 상태 변화를 일으킬 때 참조하는 객체입니다. 디스패치 : 액션을 스토어에 전달하는 것을 의미합니다. 리듀서 : 상태를 변화시키는 로직이 있는 함수입니다. 구독 : 스토어값이 필요한 컴포넌트는 스토어를 구독합니다.

yarn add styled-components 컴포넌트 스타일링하는 데 제일 각광받고 있는 패키지 styled-components가 있다. import React from "react"; import styled from "styled-components"; import PropTypes from "prop-types"; const Container = styled.button` width: 100%; border: 0; border-radius: ${props => props.theme.borderRadius}; color: white; font-weight: 600; background-color: ${props => props.theme.blueColor}; text-align: center; p..

언제 함수형 컴포넌트를 사용해야 할까? 함수형 컴포넌트는 컴포넌트에서 라이프사이클, state 등 불필요한 기능을 제거한 상태이기 때문에 메모리 소모량은 일반 클래스형 컴포넌트보다 적습니다. 리액트 v16이상에서는 함수형 컴포넌트 성능이 클래스형 컴포넌트보다 조금 더 빠릅니다. 그래서 state나 라이프사이클 API를 꼭 써야 할 때만 클래스형태로 변환하여 컴포넌트를 작성하면 됩니다. import React from 'react'; function Hello(props){ return( Hello {props.name} ) } export default Hello; import React from 'react'; const Hello = ({name}) =>{ return (..