React
[React] state와 reducer를 추가하고 싶다면??
(index.js) 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) 위 코드는 기존의 state와 reducer인데 여기에 다른 상태를 더 저장하고자 한다면 (index.js) let alert초기값 = true..
[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(){ ..
git clone 으로 React를 받아 실행했을 때 생긴 오류
npm ERR! : `react-scripts start` npm ERR! spqwn ENOENT 1. npm install -g npm@latest 2. rm -rf node_modules 3. npm install 이 3가지 스텝을 따를 것
React hooks useState의 사용
리액트 강의 복습하며 리액트 hooks의 useState에 대해 알아보겠습니다. 페이스북의 좋아요 버튼처럼 엄지버튼을 누르면 숫자 1을 올리는 걸 해보겠습니다. let [like, setLike] = useState(0); like는 0으로 초기화 해준 것이며 setLike는 like를 변경해줄 때 사용할 것입니다. import React, { useState } from 'react'; function App() { let titel = '강남 맛집 추천'; let [like, setLike] = useState(0); return ( { title } {setLike(like + 1)} }>👍 {like} ) } export default App; onClick={} 안에는 반드시 함수가 들어가며 위..
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..