이 앱에서 컨텍스트 사용을 늘리고
불필요한 속성 및 프로퍼티 내리꽂기를
앱의 다른 부분들에서 삭제하기에 앞서
컨텍스트을 사용하고 읽는 또다른 방법에 대해
빠르게 짚고 가는 것이 좋을 것 같습니다
그것은 바로 useContext 라는 hook(훅)을 이용하는 방법입니다
여러분이 앞서 배웠듯, 이 훅의 역할은
컴포넌트의 기능적 함수를 컨텍스트와 연결하고
그 함수 내에서 해당 컨텍스트 값을 사용 가능하게 만드는 것입니다
말해두자면 이 훅, 즉
useContext라는 훅을 사용하는 것이
컴포넌트 안의 컨텍스트에 접근할 때
일반적으로 사용하는 방법입니다
물론 이를 대신할 방안도 존재하기 때문에
이 또한 여러분께 소개해드리고자 합니다
여러분이 추후 다른 리액트 프로젝트 작업 중
맞닥뜨리게 될 것을 대비해서인데
특히나 구식의 코드베이스(code base)로 만들어진 프로젝트는
해당 컨텍스트 오브젝트에서 Provider 컴포넌트를
접근할 수 있었던 것과 같이
이런 프로젝트에도 컨텍스트 객체에서 접근 가능한
특별한 컴포넌트가 있기 때문입니다
이 Provider 컴포넌트는 컨텍스트 값을 필요로 하는
모든 타 컴포넌트에 이를 제공하기 위해 필요합니다
그러나 Provider 컴포넌트 외에도
CartContext 또는 그 어떤 컨텍스트 객체라도
여러분이 사용할 수 있을 또다른 컴포넌트를 제공하는데
이것을 Consumer 컴포넌트라고 합니다
컨텍스트 값에 대한 액세스를 가진 JSX 코드를 묶는 데에
이 Consumer 컴포넌트를 사용할 수 있습니다
한편 이 Consumer 컴포넌트는
특수한 자식 속성을 필요로 하는데
시작 및 종료 태그 사이로 전달되는
특별한 내용을 담는 녀석입니다
여기에서 전달하게 되는 속성이
바로 함수이기 때문입니다
이것은 JSX 코드가 아닌 자바스크립트식 표현이지만
중괄호 사이에 output이 위치하도록 만들어 주고
Consumer 컴포넌트의 시작 및 종료 태그 사이에
자식으로서 기능성 함수를 전달하면 됩니다
그리고 해당 함수는 백엔드에서
리액트에 의해 실행될 것입니다
그렇게 되면 해당 함수는 자동적으로
여러분이 여기에서 처리하는 컨텍스트 값을
매개변수로 받게 됩니다
이후 이 함수는
해당 Cart 컴포넌트가 출력해야 할
실제 JSX 코드를 반환합니다
이 함수는 근본적으로 사용된 컨텍스트를
해당 컴포넌트의 JSX 코드에서 처리 가능한 상태로 만들어주기 위해
Consumer 컴포넌트가 필요로 하는
감싸는 기능을 추가시켜 줍니다
그리고 totalPrice 계산식을
이쪽의 함수로 옮겨서
CartContext 에서 처리된 것을 기반으로
총액을 계산할 수 있도록 해보겠습니다
이 부분을 조정해 주고
JSX 코드에 있는 cartCtx.items에 접근하면 됩니다
이렇게 함으로써 우리는
useContext 훅을 없애고
그 대신 해당 컨텍스트 값을 이렇게 처리하여 사용할 수 있었습니다
이 앱을 미리보기 해서 보면
보시다시피 전혀 문제없이 동작하는 것을 볼 수 있습니다
여전히 장바구니를 편집할 수 있고
UI가 업데이트되는 것을 볼 수 있습니다
물론 이러한 접근법은 다소 길고 복잡한데다
읽는 것 또한 더 어렵기 때문에
기본 접근법으로는 적절치 않습니다
다만 다른 리액트 프로젝트에서 맞닥뜨릴 경우를 대비에
여러분께 보여드리고자 했던 접근법입니다
이 프로젝트에서는 물론
저는 이 접근법을 없애버리고
Consumer 컴포넌트를 비롯해
입력해 넣은 코드를 모두 지우고
useContext 훅을 사용하는 것으로 돌아가겠습니다
왜냐하면 컨텍스트 값에 접근하는 상황에서는
이 방법이 깔끔하고, 코드를 적게 써도 되고, 읽기도 편하고
쉽게 말해 가장 현대적이며 최선의 방법이기에
이것을 여러분의 기본 접근법으로 사용하시기를
추천드리고 싶기 때문입니다
그러나 혹시 다른 프로젝트에서
여러분께 필요할 경우를 대비해
Consumer 컴포넌트의 사용법도 알아두시기를 바랍니다