도리쓰에러쓰

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux5 :: useSelector, useDispatch 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux4 :: dispatch로 데이터 보내기 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux3 :: state와 reducer가 더 필요하다면? 저번.. dori-coding.tistory.com 1. 이미지 클릭 시 각각 상세페이지로 이동하기 - 아래 코드는 Card 컴포넌트입니다. function Card(props) { let inventory = useContext(inventoryContext); return( { props.products.title } { props...

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux4 :: dispatch로 데이터 보내기 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux3 :: state와 reducer가 더 필요하다면? 저번 게시물에 이어서 작성하겠습니다. (코드 참고) [React] Redux2 :: reducer / dispatch로 데이터 수.. dori-coding.tistory.com 1. redux를 사용하는 이유 우선 글을 작성하기에 앞서, reducer를 사용하는 이유를 다시 작성하겠습니다. 1️⃣ 모든 Component가 props 없이도 state를 꺼내 사용할 수 있습니다. 2️⃣ state 버그 관리가 용이합니다. state를 수정하려면 수정 방법을 redu..

저번 게시물에 이어서 작성하겠습니다. (코드 참고) [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..