도리쓰에러쓰

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux3 :: state와 reducer가 더 필요하다면? 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux2 :: reducer / dispatch로 데이터 수정하기 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux1 :: props 대신 사용하기 저번 게. dori-coding.tistory.com 1. dispatch()로 데이터 수정 요청할 때 데이터 보내기 1️⃣ Cart.js에서 버튼에 dispatch()에 payload 추가하기 dispatch({ type : 'type명', payload : '보낼데이터' }) { props.dispatch({ type : '수량증가'..

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux2 :: reducer / dispatch로 데이터 수정하기 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux1 :: props 대신 사용하기 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Tab 만들기와 리액트에서의 등장 애니메이션 저번 dori-coding.tistory.com 1. redux를 통해 Alert창 닫기 기능 만들기 1️⃣ Cart..js에 alert 창을 하나 생성합니다. * div class는 bootstrap에 정의되어 있는 것을 사용하였습니다. 지금 구매하시면 신규할인 20% 닫기 2️⃣ alert 창의 상태를 저장하는 state와 reducer를 만듭니다. ..

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux1 :: props 대신 사용하기 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Tab 만들기와 리액트에서의 등장 애니메이션 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Component가 많을 땐 Context API 사용 dori-coding.tistory.com 1. reducer() 이용하여 수량 변경하기 🔔 Redux 쓰는 이유 : state 데이터 관리 용이합니다. redux에선 state 데이터의 수정방법을 미리 정의하는데, 지금부터 reducer() 세팅 방법 두가지를 알아봅시다. 💡 reducer() 세팅 방법 - 1 - index.js에서 store 변수에 createSt..

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Tab 만들기와 리액트에서의 등장 애니메이션 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Component가 많을 땐 Context API 사용하기 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Component 3개 중첩하여 만들고 state 전달하 dori-coding.tistory.com 1. cart 페이지 만들기 1️⃣ Cart.js 파일 생성 후 아래 코드를 작성합니다. import React from 'react'; import { Table } from 'react-bootstrap'; function Cart() { return( # 상품명 수량 변경 1 Table cell Tabl..

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Component가 많을 땐 Context API 사용하기 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Component 3개 중첩하여 만들고 state 전달하기 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] React에서의 Ajax 요청 방법 / axios 설 dori-coding.tistory.com 1. Tab 기능 만들기 - Tab 기능을 아래의 방법으로 구현할 예정입니다. 1) UI 만드는 법 1️⃣ UI 상태를 true / false state로 저장합니다. 2️⃣ state에 따라 UI 보이게 안보이게 합니다. 2) Tab UI 만드는 법 1️⃣ 몇번째 버튼 눌렀는지를 state로 저장..

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Component 3개 중첩하여 만들고 state 전달하기 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] React에서의 Ajax 요청 방법 / axios 설치 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Lifecycle Hook(예전 문법) vs useEffect(요즘.. dori-coding.tistory.com 1. Context API 사용하기 📌 Context API 사용하는 이유 : props에 전달하지 않고도 하위컴포넌트들이 props 없이도 부모의 값을 사용 가능 저는 이전에 만들었던 inventory state를 가지고 Context API를 사용해보겠습니다. let [invent..

1. 리액트 사이트 build 각자 만들었던 리액트 사이트를 배포하려면 App.js 파일 그대로 올리는게 아니라 build용 파일을 생성한 후 그 파일을 올려야합니다. 왜냐하면, 웹브라우저는 HTML, CSS, JS만 해석할 수 있어서 리액트의 state, JSX, SASS 등을 해석하지 못합니다. 그래서 리액트 프로젝트를 build하면 HTML, CSS, JS 언어로 바꿔주고 이 파일을 웹에 올려야 사용자들의 리액트 사이트를 볼 수 있습니다. 저는 리액트 프로젝트를 build하고 무료로 HTML 파일을 호스팅해주는 GitHub Pages를 이용해 배포까지 해보도록 하겠습니다. 🔔 만약 웹서버를 가지고 있다면? : 리액트 프로젝트 만들고 build하면 index.html 파일이 생성됩니다. 여기에 웹서버..

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] React에서의 Ajax 요청 방법 / axios 설치 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Lifecycle Hook(예전 문법) vs useEffect(요즘 문법) 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] SASS 개념, 설치 및 기본 문법 저번 dori-coding.tistory.com 1. 3개가 중첩되어 있는 Component에 데이터바인딩 - 우선 App.js에 재고량 데이터를 생성합니다. let [inventory, setInventory] = useState([10, 11, 12]); - Detail.js에서 재고 : ??? 를 생성합니다. { findProduct.tit..