이제 컨텍스트가 제공되도록 했으니
이것을 사용해 볼텐데
Cart 컴포넌트에서 사용해보자면
장바구니에 담길 항목이 필요합니다
현재는 속성을 통해 해당 내용을 받고
이쪽으로 출력이 되도록 하고 있는데
장바구니가 비어있는 경우라면
대체(fallback) 텍스트가 뜹니다
이렇게 컨텍스트 기능을 더했고
만들어진 컨텍스트에 값이 설정되면
지금은 비어있는 항목 배열이지만
이 컨텍스트를 사용해서
items의 내용을 찾을 수 있고
이 items가 항상 비어있지 않도록 할 수 있습니다
그렇게 하기 위해서 우리는
CartContext를 가져오기 위해 store 폴더의
shopping-cart-context.jsx 파일이 필요합니다
파일 안에는 컨텍스트를 사용하기 위해
컴포넌트가 이것에 접근하려 합니다
이쪽 파일에서는
리액트에서 다른 것을 가져와야 하는데
그것은 바로 리액트가 제공하는 hook(훅)입니다
useContext 라는 훅인데
이 훅은 우리가 여기 Cart 컴포넌트와 같은
그 어떤 컴포넌트의 함수일지라도
컨텍스트 값에 접근해 이를 사용할 수 있도록 해 줍니다
그렇게 하기 위해서 우리는 Cart 컴포넌트 함수 안의
useContext 를 불러낼 것이고
컨텍스트 사용을 위해 우리의 CaartContext를 값으로 전달하겠습니다
이렇게 하게 되면
소위 컨텍스트 연결구조가 만들어진 것입니다
그리고 useContext로부터 값을 돌려받을 것인데
우리가 이 초기값에 items 속성을 추가했기 때문에
이 값은 items 속성을 가진
상태일 것입니다
이러한 이유로 우리는 이제
제가 cartCtx.items.length 라고 이름붙인
cart 컨텍스트를 이 check에서 사용할 수 있습니다
두 번째 check 에도 동일한 작업을 해 주겠습니다
그리고 아이템 매핑을 할 때
여기에 cartContext.items를 사용해서
속성을 쓰지 않아도 되기 때문에
필요 없어진 속성을
삭제해 버릴 수 있습니다
여기에도 cartCtx.items 를 사용해서
이 물건들의 총액을 가져올 수 있습니다
이것을 저장하고 나면
비어있는 웹사이트를 얻게 됩니다
비어 있는 이유는
개발자 도구창을 열어보면 알게 됩니다
여기를 보면 Context.Provider 컴포넌트에
필요한 값의 속성을
입력해주지 않았다는 것을 알 수 있습니다
우리가 꼭 해주어야 하는 작업이기도 합니다
여기 이렇게 기본값을 설정해 두더라도
CartContext.Provide 컴포넌트에
값 속성을 추가해 주어야 합니다
저는 여기에 마찬가지로 빈 항목 배열을 가진
이 객체에 값 속성을 설정하도록 하겠습니다
다시 말하지만 이렇게 값 속성을 설정해주고
컨텍스트 값 또한 제공해야만 합니다
이 기본값이 유용한지에 대해서는
조금 후에 다시 이야기해 보도록 하겠습니다
여러분은 이 값 속성을 추가하고
컨텍스트 값을 제공해 주어야 하는데
현재로서는 동적이고
직접 코드를 작성한 값입니다
이제 이것을 저장하고 나면
웹사이트가 이전처럼 보여지게 됩니다
장바구니를 열어보면 이렇게 '장바구니에 항목 없음!'이라는
문구가 보이고, 여기에는 아무런 오류도 보이지 않습니다
즉 이 컨텍스트 기능이 잘 작동하고 있습니다
'장바구니에 항목 없음' 문구가 뜨는 이유는
현재 컨텍스트의 items가 언제나 빈 배열 유지하도록
설정되어 있기 때문입니다
그렇지만 오류가 나오지 않았으므로
이 컨텍스트 값을 잘 읽을 수 있다라는 것을
명확히 알 수 있습니다
이렇게 기본값을 설정하는 것이 왜 유용할까요?
그것은 이를 통해 보다 나은
자동완성 기능을 얻을 수 있기 때문입니다
제가 cartCtx라고 입력을 하게 되면
해당 기능이 items 속성에 접근하기를 원하는지
유추하여 추천을 해 주는 것입니다
이것은 기본값이 설정되어 있기 때문입니다
그렇기에 이것과 같은 기본 컨텍스트 값을 설정해 두는 것은
여러분의 개발자로서의 삶을 보다 수월하게 만들어줄 것입니다
삶을 수월히 만드는 이야기가 나온 김에
여기에서 items를 이렇게 빼내는 방법 등으로
이 컨텍스트 객체를 구조 분해(destructure)할 수도 있습니다
여기에서도 자동완성 기능이 작동하는데
구조 분해하는 중괄호 사이에서
컨트롤+스페이스바 키를 눌러 보겠습니다
이렇게 되면 여기 있는 것들을
items.reduce 또는 items.length
혹은 items.map 같은 식으로 수정해서
사용하는 코드 수를 줄일 수 있게 됩니다
오늘은 컨텍스트와 그 값에 접근하는 방법을 다루었습니다
그렇다면 이 컨텍스트와 상태를 어떻게 연결시킬 수 있을까요?