장바구니 추가기능, 이런 기능을 구현하려면 결국 reducer수정방법에 다라 dispatch를 이용해 데이터를 다시 전송해야한다. dispatch로 전송하는법과 reducer안에서 받은 데이터를 payload로 사용하는법을 알아보자 redux에서 데이터를 수정할때의 3단계 1.데이터 수정하는법 만들기 2.dispatch하기 3.dispatch에서 데이터를 함께 실어 보내기 let 초기값= [{id : 0, name : '멋진신발', quan : 2}, {id : 1, name : '멋진신발2', quan : 3}, {id : 2, name : '멋진신발3', quan : 5}, ] function reducer(state = 초기값, 액션){ //es6 신문법, 기본파라미터 문법 데이터 초기값을 그냥 넣..

Redux를 쓰면서 중요한건 state나 reducer가 여러개 있을 수 있다는거 당연히 프로젝트가 커지면 커질수록 여러개를 만들 수 있겠지 그래서 아마 이사용방식이 점점 최종형태가 될듯싶다. combineReducers()라는 함수에 만든 createStore()를 넣고, reducer도 여러고 결합해서 사용해주는 형태를 알아보자 위와같은 팝업을 닫는거는 그냥 useState를 써도되지만 Redux를 사용해서 해보자 index.js let 초기값= [{id : 0, name : '멋진신발', quan : 2}, {id : 1, name : '멋진신발2', quan : 3}, {id : 2, name : '멋진신발3', quan : 5}, ] function reducer(state = 초기값, 액션){..

reducer / dispatch 리덕스 데이터 수정하는법 리덕스에서 state데이터를 수정하는법 reducer 함수를 만들어 수정하는 '방법'을 정의해놓는다 그리고 dispatch()함수를 사용해 reducer에 수정을 요청한다. 정해져있는 방식이니 그대로 사용하자 function Cart(props){ return ( # 상품명 수량 변경 { props.state.map((a,i)=>{ return ( {a.id} {a.name} {a.quan} { ??? }}> + ) }) } ) } props.state로 리덕스에있는 state를 가져와 map반복문을 사용 a는 당연히 안의 값이고 i는 인덱스 값이다. 오류가 나지않게 key 값을 넣어주고 state안의 id,name,quan을 출력하게 만들었다...

Redux - props전송없이 모든 컴포넌트에서 state를 사용하기 위해 사용 이와같은 구성에서 App.js와 index.js를 기본으로 여러 컴포넌트들을 만들어준다. 우선 중요한건 redux설치와 세팅 redux,react-redux두개를 설치해준다. yarn add redux react-redux npm install redux react-redux cart.js라는 곳에 새로 만들고 컴포넌트로 app.js에 등록을해준다. import Cart from './Cart.js' ..... 그리고 index.js에 redux설정을 해준다. import { Provider } from 'react-redux'; import {combineReducers, createStore} from 'redux'; ..

버튼을 여러개만들어서 div를 보여줄 수 있는데 그냥 탭만들기라고 명칭, 쉽게말하면 그냥 버튼1,2,3 그리고 탭 1,2,3 이렇게 연결하는걸 말함 return ( 버튼0 버튼1 버튼2 내용0 내용1 내용2 ) 이런식으로 되어있는걸 부트스트랩을 써도되고, 그냥 버튼을 사용해도됨 방식은 useState를 사용해 어떤 버튼을 눌렀는지 state로 저장해두고 상태에 따라 div를 조건문으로 보였다 안보였다 해주면됨 on/off가 아닌 버튼 숫자를 저장하면 된다. let [누른탭, 누른탭변경] = useState(0); .......... { 스위치변경(false);누른탭변경(0)} }>Active { 스위치변경(false);누른탭변경(1)} }>Option 2 { 스위치변경(false);누른탭변경(2)} }>..

props와달리 계속 props->props해서 안쓰고 좀더 다른방식으로 사용할 수 있는 방법 컴포넌트 > 컴포넌트 > 컴포넌트 이렇게 있을때 겉에 감싸주기만 하면 사용할 수 있다. import React,{useContext, useState} from 'react'; useContext를 가져와서 let 재고context = React.createContext() function App() { let [shoes,shoes변경] = useState(Data) let [재고,재고변경] = useState([10,11,12]) ......... 이와같이 context를 만들어준다 그리고 아래와같이 context.Provider로 감싸주고, 안에 useState에서 선언한 변수를 넣어준다. {/* 이안에서..

배포는 매우간단 요약 1.리액트를 빌드해서 브라우저가 해석할 수 있는 html,css,js로 만들어줘서 배포해야한다. 2.간단 테스트는 깃허브에해도되지만 여타 웹호스팅에하려면 결국 빌드한후 build/index.html을 보여주면된다. 3.package.json에 "homepage":"http://flykimjiwon.dothome.co.kr/shop" 이와같이 추가해준다. 4. npn run build yarn build 이와같은 명령어를 터미널에 입력하면 10초정도 걸리고 빌드가 완료된다. 그럼 build안에 있는 파일만 업로드하면끝 1)깃허브에하는경우 -본인아이디.github.io라는 레포지토리를 만든다. - build파일을 그대로 올린다. -본인아이디.github.io/index.html로 접속하..

- Component중첩 컴포넌트1 > 컴포넌트2 > 컴포넌트3 이런식으로 있으면 중첩으로 props를 계속 전달해주면된다. 컴포넌트1에 있는 state를 컴포넌트3에서 쓰고싶다? 그리고 변경함수까지 전부 props->props로 계속 전달할 수 있다. 대체방식으로는 redux같은것이 있지만 우선 알아두자 이런식으로 컴포넌트 1에있는 재고를 컴포넌트3에서 관리한다고 생각해보자 컴포넌트1-> 컴포넌트2 로 props 컴포넌트2-> 컴포넌트3 으로 props하면 될것이다. let [재고,재고변경] = useState([10,11,12]) 첫번째에 컴포넌트에 선언된, 가장상위 App컴포넌트에 선언된자료 그 안에있는 두번째 컴포넌트 Detail에 state랑 state변경함수 둘다 props로 전송해준다. {찾..