React/React Redux Toolkit5 [React] Redux 를 이용하여 장바구니 상품 담기 및 수량 변화. 💡 Redux를 이용해서 장바구니 수량 변화 적용 redux 의 state 값을 변경하기 위하여 slice 파일에 reducers에 증가함수를 추가해준다 이때 변경할 곳에서 useSelector 와 useDispatch 를 임포트 해주고 데이터 값을 받아올 때 배열의 순서가 아닌 id 값으로 상품을 컨트롤 해주면 훨씬 더 정확한 수행을 할것이다. 따라서 payload 로 전송해주는 값을 id값으로 전송을 해준다. 그 전에 변경 함수를 export 해주고 import 해주는 것을 잊지말자. 받은 배열의 id 값을 이용해서 카트에 있는 id 값이 동일한 배열을 가져오면 된다. 이때 이용할 수 있는 기능이 findIndex 를 이용할 수 있다.(내부의 조건에 일치하는 배열을 순서반환) 이렇게 id 값이 동일한.. 2023. 1. 29. [React] Redux 에서 state가 object/array 일 때 변경하기! 💡object / array 함수의 경우 redux를 통해서 state를 변경하는 방법이 다르다. Redux의 경우 state를 변경요청하면 기존의 것에서 한번에 모두 바꿔주니까 이런식으로 해주면 바로 바뀔 수 있다는건 어느정도 예상이 가능하다. 여기서 array와 object를 갖은 state는 약간의 다른 특징이 있다. return 부분 잆어 해당 초기값을 가져오는 파라미터값에 변수명을 지정하여 바로 변경이 가능하다. return 문 안써도 되는 이유는 (immer.js) 어떤 라이브러리가 자동으로 state 복사본을 return 해준다. 즉 object나 array 같은 함수들은 직접 수정해도 적용되기 때문에 return 문의 전체 데이터 함수를 다 옮기지 않아도 된다. 💡 Redux의 숫자 sta.. 2023. 1. 28. [React] Redux store의 state 변경하는 방법 💡 store의 state 변경하는 방법 Redux 의 state 변경하는 법 1. state 수정 해주는 함수를 만들어 준다. 2. 그 함수에 해당하는 변경을 원할 때 함수를 실행해 달라고 store.js에 요청한다. 🔍 Step 1. state 수정해주는 함수 만들기 creatSlice 에서 변경함수를 추가해 주면 된다. changeName 은 작명한 이름이다. 원래는 kim 을 john kim 으로 바꾸는 코드인데 작명한 changeName 파라미터 값이 기존 initialState 에 들어있는 데이터 값이다 기존 state 를 파라미터를 이용해서 사용이 가능하다. 따라서 'john'+ state 해도 'john kom' 과 동일하다. 🔍 Step 2. 만든 함수 export 해야 함. 바로 cha.. 2023. 1. 28. [React] Redux를 이용해 State 저장, 사용해보자 Redux 쓰는 이유가 뭐라고?? 🔍 컴포넌트간 props없이도 편하게 state 공유가 가능하기 때문에 사용한다. 💡Redux store에 state 보관하는 법 createSlice 를 store.js에 import 해준다. (useState() 역할을 한다.) Redux 에서 state 하나를 slice 라고 부른다. 이러한 구조로 이루어져 있음. createSlice 로 선언하고 나서 state의 이름과 초기값을 설정해 준 후에 configureStore에 넣어서 등록을 해줘야 한다. (정확한 규격에 맞춰서) 등록을 할 때 createSlice를 변수에 저장을 해준다. createSlice 내부의 name 은 라이브러리 내부적으로 쓰는것 각 createSlice의 name은 서로 다르게만 잘 넣으.. 2023. 1. 28. [React] Redux Toolkit 설치하기 💡 cart.js 페이지 만들고 테이블 양식 boot-strap에서 가져오기 cart.js 파일을 만들고 App에 Route 경로를 만들어준다. BootStrap 을 이용해서 Table을 만들어 보자 최 외곽에 Table 태그를 넣고 은 하나의 가로줄을 만드는 역할을 하고(행) 하나의 세로줄을 만드는 역할을 한다(열) 는 th를 포함한 제목 부분 는 td를 포함함 제목부분 이때 장바구니 State 가 App, Detail, Cart 등에 필요하면?? 🔍 최상단 컴포넌트에 만들어서 App에 만들어서 부모에서 자식으로 전송해야한다. 이러한 과정이 매번 번거롭고 귀찮다면??!! Redux 를 쓰면 된다! Redux를 쓰면 컴포넌트 간에 props 없이도 state 공유가 가능하다. 컴포넌트가 많은 프로젝트 일.. 2023. 1. 28. 이전 1 다음
