리액트)장바구니+결제페이지만들기

1.장바구니 분석하기

 

1-1 리덕스에서 장바구니에 저장한 state를 가져와 뿌려준다

1-1-1 useselector로 리덕스 state 불러온다 

1-1-2 state가 배열이니 map으로 인덱스1개씩 가져온다

 

 

1-2 수량 기본 1개이고 변경가능하도록한다.

1-3 유저정보를 불러와서 주소와 전화번호를 확인해준다.

1-4 수량과 가격에따라 총결제금액을 만들어준다.

1-5 결제하기누르면 해당 유저정보에 저장시켜준다

 

2.리덕스내에 중복없애기

 

2-1 state.cart에 배열로 객체가 저장되어있다

2-2 map을 사용시 state.cart[0]~[끝]으로 하나씩 가져올것이다.

2-3 인덱스 1개씩 가져와서 어떻게 비교해야 배열의 중복을 없앨까

2-4 배열내장함수 filter를 사용해보자-> 배열에서 true를 만족하는 원소로 다시 배열을 반환한다.

 

 

 

3.코드해석하기

 

3-1 return에 존재하는 함수부터 실행

3-2 findindex는 배열을 탐색하여 참이되는 조건의 인덱스를 알려준다.->맨처음 인덱스

3-3 filter는 배열의 원소를 1개씩 가져오면서 참이되는 원소만 통과시켜 새로운배열을 만들어준다..

3-4 반복분 2차로 보면되는데 filter원소를 1개던짐->findindex는 모든원소를 대입해본후 해당인덱스를 반환->

반환된인덱스를 다시 fliter함수에서 대입후 맞으면 해당원소 배열에 반환

3-5  filter의 원소1개 와 findindex원소전체를 비교->  현재인덱스와 전체뒤져본 인덱스가 일치하는지

현재인덱스와 전체뒤져본인덱스가 다르다는말은 중복이1개 더있다는말

 

4.총결제금액 만들기

 

4-1 useeffect에 리덕스 state를 가져오면서 map을 사용하여 같은크기의 배열이며 원소가 1인 객체를 만든다.

4-2 리덕스 state와 원소가 1인객체를 서로 동기화시켜야한다->db에 같은 인덱스로 자료를 넣을거임

4-3 출력쪽으로가서 onclick이벤트를 만들어준다 동기화된 배열객체의 인덱스값을 변경시켜준다

4-4 주의할점은 배열인만큼 setcount값안에 배열을 만들어줘야한다-> 리덕스는 기존값을 엎어버린다.

 

5.유저정보창 만들기

 

5-1 세션의 아이디를 서버로 보낸다->언제->장바구니컴포넌트가 mount되었을떄
5-2 useeffect를 사용하여 axios로받아온 데이터를 태그에 뿌려준다

 

6.useeffect 코드리뷰

6-0 sum 변수의 범위는 useeffect가 소멸될떄까지 유효하다.

6-1 장바구니에 컴포넌트가 mount될때 statecart가 생성된뒤에 map을 생성하는게맞기에 useeffect에 넣었다.

6-2 map을 돌리면서 count에 statecart와 크기가같은 배열을 생성하면서 원소로 1을 준다

6-3 sum은 초기count와 statecart가 생성된후에 총합을 구해야하니 마지막에 넣었다

6-4 setcount를 사용하여 원소가 1인 배열을 count에 넣어준다

6-5 지역변수에서 전역변수로 값을옮기고 소멸하는과정이라고생각해야함

6-6 map함수가끝나면 이제 sum값을 subtotal에 넣어주면된다

6-7 aixos요청으로 유저정보를 불러오는데 모두렌더링하고 나중에 불러와도된다

6-8 객체는 내용물이바뀌어도 주소가 안바뀌니까 값을 바꾸꼬 setstate에 넣어도 반응이없으니 새로운주소값으로 옮겨줘야 렌더링이된다

6-9 다만 렌더링이 무한으로 발생할수있으니 useeffect에 의존성을 주입하여  컴포넌트가 마운트될떄만 가능하게한다. 

 

7.상품갯수배열을 따로 만든이유는

 

7-1 상품수량을 default값 1을 준다->db에서

7-2 리덕스 state에 상품수량을 출력한다.

7-3 리덕스 state에 상품수량을 onclick이벤트로 연결하여 상품수량을 조작한다->db와 연결이 많아져서별로라고생각했다->최종적으로 구매하기버튼을 누르기전에 db에 값을 수정안했으면좋겠다.

7-4 최종갯수만 db에 반영하게 할수없을까

7-5 state에서 stock부분만 따로 뗴어내서 갯수배열로 만든다

7-6 갯수배열에 값을 조절하고 구매하기누를떄 같이 저장시키면된다

 

8. 객체를 setstate할때  if문으로  객체내부의 값이 변경되었을때만 새로운주소값을 주면 되지않을까?

 

 

 

 

9.리덕스에선 객체내부의 특정자료만 바꿀수있다.

 

9-1 리덕스 state에 

 

10.구매하기 버튼 구현하기

 

10-1 구매하기버튼누르면 상품번호 상품갯수,유저아이디를 서버로 보내줘야한다

10-2 상품번호당 상품갯수 유저아이디를 서버로보내야한다.