Redux 로 장바구니 만들기 : 1

정지원·2021년 10월 17일
0

redux

목록 보기
1/6
post-thumbnail


일단 먼저 src 폴더에 장바구니 폴더를 하나 만들어주자 Cart.js !


import는 바로바로 !
이제 컴포넌트 만들고 export까지 적어주자 !
컴포넌트들이 너무 많아진다면, 컴포넌트들만 담아두는 하위폴더를 만들어도 좋다 ! (보기 편하니까)
css파일같은것도 다 다른 폴더 하나에 담아놔둬 굿 !


react-bootstrap에서 테이블표를 가져와서 넣자(편하자나)


이제 다시 app.js로 와서 상단에 Cart.js를 import 해주고 !

app.js에서 장바구니 페이지를 만들어야하니 라우터를 이용해서 Cart페이지를 생성해주자 !
path 꼭 넣어주는거 잊지마시구용

다시 Cart.js로 넘어와서 표에대한 구성을 살펴보겠다.
tr은 가로행을 만드는 선언
td는 세로해을 만드는 선언 !

그런 데이터가 어디있냐구요? 하나 만들어야지요~
중요한 정보니까 app.js에 state 만들러 갑시다 ~_~매번 이렇게 보내는거 넘나 귀찮자나요 그쵸? 이럴때 그래서 무엇을 쓴다?


내가 원하는곳에 모든 컴포넌트들이 같은 state들을 공유할수있게 쓰는거임!

빨리 터미널 열구 리덕스 라이브러리 설치하러 가쟈잇! 그러고나서

index.js로 와서 Provider라는 컴포넌트를 import를 해주자

Provider 라는 컴포넌트로 이제 내가 원하는곳에 감싸주게되면
Provider에 감싸진 애들은 props없이도 state 공유가 된다 !

내가 공유하고 싶은 state는 어디에 만드냐? 여기 index.js폴더에 만들어도 되고
길어지면 다른 파일에 만들어도 된다
그리고 createStore()를 써보자 (위에 import까지 같이 해줘야함)
createStore() 이 안에는 함수를 넣을수 있는데(콜백 or arrow function 사용)
무언가를 return(퉤 뱉어주세요)하는 함수를 만들수 있다, 무엇을 만들거냐?
state를 다시 퉤 뱉어주는 함수를 만들거다
어떤 state를 뱉고싶냐? 상품 데이터를 담은거를
그리고 데이터를 안에 오브젝트 형식으로 담고, 그러를 store 라는 변수에 담자 !


그리고 이렇게 Provider에 props 전송을 해주면 ! Provider로 감싼 모든 컴포넌트들은 store 안에있는 state들을 공유해서 쓸수있다
이제 이 데이터를 누구나 쓸수 있는지 테스트 해보자

Cart.js 로 넘어와서 상단에 import 해주고
하단에 기존에 적어놓은 export deafault Cart;를 지워주고 새롭게 connect()()를 사용하면 된다

이 함수가 무슨 역할을 해주냐면 ?!
index.js안에 store라는 변수에 담긴 state 정보들을 가져와서 props로 만들어주는 함수다그리고 props는 이렇게 생겼습니다 ~ 라고 지정해주고, 이거를 return으로 퉤 뱉어주세요~ 하는거임 요약해서 !
일종의 "props화 시켜주세요~~" 하는거다

일일이 다 적기 좀 그렇다면 state를 state라는 이름으로 쓰겠습니다 ~
그러면 store안에 있던 모든 데이터를 state 라는 이름으로(props)로 바꿔주세요 ~ 하는거임, 여기까지가 딱 ! 세팅하는거임 위에 이제 내가 쓰려는공간에 쓰려면 props.state 이런식으로 작성하면 된다


데이터 바인딩 최종입력!

profile
강의보며 공부하고, 개인/팀 프로젝트 준비하는 개발일지 입니다;

0개의 댓글