230409 메타인지 스터디 3회차

메타인지 스터디는 각자 본인이 일주일동안 공부한 내용을 기록하고, 회고해보는 스터디이다.

 

 

일주일동안 구현한 기능들

1. 더보기 버튼을 누르면 3초 있다가 로딩창이 뜨고, 상품이 뜨면 로딩창이 지워짐
2. 3초이내 할인쿠폰 메세지 등장했다가 3초후에 사라짐
3. Detail 페이지의 하단 탭 ui 만듦 (버튼 0 누르면 내용 0뜸)
4. 내용0,내용1,내용2 가 뜰때 0.5초 간격을 두고 서서히 등장함
5. Detail 페이지가 처음로드 될때 1초 간격을 두고 등장함
6. 데이터를 데려와서 Cart 페이지에 반복문으로 렌더링
7. 변경하기 버튼을 누르면 수량이 +1씩 추가됨
8. Detail 페이지에서 주문하기 버튼을 누르면 Cart에 상품이 추가됨

 

<어려웠던 점>

변경하기 버튼을 누르면 수량이 +1씩 추가됨

타켓팅을 하기 어려웠다

 

(1) 배열을 기준으로, 0번째 버튼을 누를때 0번째 상품수량이 +1 되도록

(2) id를 기준으로, 특정 id의 버튼을 누를때 동일 id의 상품수량이 +1 되도록

 

 

 

<어떻게 품?>

Redux store 이라는 라이브러리 사용, props 없이 컴포넌트끼리 state 공유 편리하게! 

단, 방법이 조금 복잡

Reducers 안에 State 변경함수를 작성할때 

두번째 파라미터인 action 에 따라,

action payload가 이 증감이 될수도, 몇 번째가 될수도, id를 나타내는 값이 될 수도 있어서

 

처음에 받아들이기 어려웠으나,

의사코드를 작성하고

다 지운뒤 다시 코드를 따라쳐보면서 익숙해질 수 있었음