본문 바로가기
  • 삽질하는 자의 블로그
4. Context 에서 "카트"의 "삭제" 로직을 추가해보자 with Array.splice() 사용 useReducer javascript Array.findIndex() Array.splice() Array.filter() "제거" 방법에, splice() 를 사용했지만, "제거"를 위해,전체 배열을 바꿔서 업데이트해도 된다. Array.filter() 를 사용하여, 해당 id 와 "같지 않은" Element 들만 남겨서 삭제하는 방법도 있다. Add 로직은 추가했다. reducer function 의 "REMOVE_ITEM" 타입에, 제거 함수를 추가해보자. 제거로직 with "Array.splice()" 0. context에서 action 의 페이로드 로, id 를 받아, 해당 INDEX 를 찾는다. 1. 카트에서 - 를 누르면, 해당 id에 대한 amount 에 -1 을 시킨다. 2. 카트.. 2022. 12. 12.
3. 카트 내에서 context를 조작해보자. WITH function.bind() 사용 : function.bind() 카트 안에도 추가 삭제 버튼이 있다. + 와 - 버튼을 누르면, context를 조작하여, 변경된 값을 받아보도록 하자. 우선 Array.map() 을 상요한 무한히 증식하는 버튼의 함수를 하나씩 타겟할때, 바닐라 자바스크립트의 경우는, DOM 에 접근해, querySelectorAll() 을 사용할 것이다. 하지만 React에서는, "선언형 뷰" 를 사용하고, Virtual DOM 에 접근 하는 것이 유리하기 때문에, 그렇게 하지 않는다. 대신 function.bind() 를 사용할 것이다. 모르겠다면, https://dive-into-frontend.tistory.com/69 참조하도록 하자 프로세스 1. 전체 ItemInfo 을 useContext 를 통해 가져.. 2022. 12. 12.
2. Context, useReducer 를 사용하여, 카트에 물건을 담아보자. 사용 Hook useContext, createContext, useReducer , useState javascript 메서드 findIndex, concat reduce function.bind() 본문 카트는, "카트 내부" 뿐 아니라, "메인에 있는 음식 선택창", "음식 선택창의 +, - 버튼" 등 "어디에서나 접근 가능해야한다." 나는 아직 Redux 를 잘 모른다. (현재 진행중이다) 그래서 상태관리가 미흡하다. 그러므로 Context 를 사용하여, 카트에 모든 값들을 접근시켜보자. 총 프로세스 1. context 를 만든다. 2. context 안에는 useReducer 를 만들어, 추가하고 삭제하는 로직을 만든다. 3. cart 안에서 필요한 상태는, "총가격", "카트 안에 담긴 정보".. 2022. 12. 12.
1. Cart와 Modal, 그리고 Portal 카트를 누르면, Modal 이 나오는 화면을 구축하고 싶다. 프로세스를 생각해본다. 1. "카트" 를 만든다. 2. "카트 버튼"을 누르면, "카트" 가 "모달" 형태로 만들어져 렌더되게 만든다. 3. 그러므로 "카트 모달"은 "포털"을 이용하여, "index.html 에 연결한다." 4. "카트 모달이 실제로 렌더되는 곳은 index.html"이다. 5. "카트가 직접 실행되는 곳은, Header의 카트 버튼"이다. 6. "카트 버튼"에서 "카트 모달"을 렌더하면, "카트 모달"은 "최상위 포지션의 형제 컴포넌트로 렌더된다." 7. "실행되는 곳"에서는 State 를 통해, 끄고, 켜고를 만든다. 8. 또한, "끄고 켜는 함수" 를 "카트 모달"로 props 드릴리으로 넘겨 "모달에서도 끄고 닫기를 사.. 2022. 12. 12.

티스토리툴바