react
[React] Redux셋팅 후 Reducer 셋팅하기
(index.js) import { Provider } from 'react-redux' import { createStore } from 'redux' let 초기값 = [ { id : 0, name : '멋진신발', quan : 2 }, { id : 1, name : '멋진신발2', quan : 1 } ] function reducer(state = 초기값, 액션) { // 여기서 등호가 들어가는 문법은 default parameter 문법(ES6 문법) if (액션.type === '수량증가') { let copy = [...state] copy[0].quan++ return copy } else { return state } } let store = createStore(reducer) // re..
Redux 란? Props 와 비교
1. Props란 Component간에 데이터를 전달해주는 것으로 부모가 자식에게 일방향으로만 전달해 줄 수 있음. 전달받은 자식에서의 값을 바꾸려면 전달해준 부모에서 값을 바꿔줘야 바뀜. 2. Redux란 Redux 는 State를 관리해주는 툴입니다. props 전송 없이도 모든 컴포넌트들이 state를 사용할 수 있습니다. npm install redux npm install react-redux redux 모듈은 데이터를 엄격하게 관리해주고 react-redux 모듈은 리액트에서 redux를 사용할 수 있게 해주는 라이브러리입니다. (Cart.js) import React from 'react'; import {Table} from 'react-bootstrap'; function Cart(){ ..
Redux) 데이터를 보관하기 위한 Redux 설치/셋팅
- redux를 쓰는 이유 1. 깊은 하위컴포넌트들과 props 여러번 전송없이 state를 직접 갖다 쓸 수 있음. 2. state 데이터 관리에 용이 일단 의미를 명확히하도록하자. A: import Table from ~ ; B: import { Table } from ~ ; A는 ‘from ~’ 에서 export default Table 을 가져오겠다는 뜻이고 B는 ‘from ~’ 로부터 Table 이라는 것을 가져오겠다는 뜻이다. redux를 다음과 같이 세팅한다. 1. 터미널을 키고 npm install redux react-redux 를 실행하여 다운받는다. 2. index.js 에서 provider 를 가져온다. import { Provider } from 'react-redux'; impo..