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 를 통해 가져온다.
2. 각 항목마다 맞는 데이터를 find 와 id 파라미터 를 통해 찾는다.
3. 각 항목에 대해, + (=amount +1) 와 - (=amount -1) 을 해주기 위해, 
	context에 amount를 +1 혹은 - 1을 입력하여 넘기는 함수를 만든다.
    
 
 ==> 결론적으로, Context안의 reducerFunction 의 로직에 의해,
 	같은 id가 있다면 amount 만 추가되는 방향으로 될것이다.

 

코드 [카트 컴포넌트의 +, - 버튼]

       function cartItemAdd(id) {          //  cartCtx.addItem 메서드는, item(id,name,amount,price) 를 받는다.

            const selectedItem = cartItemInfo.find(item=>(item.id == id))

            cartCtx.addItem({
                id:selectedItem.id,
                name:selectedItem.name,
                amount:1,
                price:selectedItem.price
            })
        }
                ...       

        <div>
            <button onClick={cartItemAdd.bind(null,item.id)}> + </button>
            <button onClick={cartItemRemove.bind(null,item.id)}> - </button>
        </div>