이 데모 앱, 데모 쇼핑몰에
컨텍스트를 더해 보겠습니다
이를 위해 scr(소스 폴더) 안에 새 폴더를 만들고
그 폴더에 store 라는 이름을 붙이겠습니다
사실 이 부분은
기술적으로 필요한 것은 아니며
여러 리액트 앱에서 볼 수 있는
관습이라고 할 수 있습니다
이러한 컨텍스트 값을 파일에 저장하고
그 파일들을 모으는 폴더 이름을 store로 했습니다
그 이유는 앱 전체
또는 적어도 여럿의 컴포넌트에 사용되는
데이터와 상태를 저장해두기 때문입니다
그 이유로 이런 이름을 사용했지만
이름을 짓는 것은 여러분들에게 달려 있고
법칙은 아닙니다
이제 그 store 폴더에 새로운 파일을 하나 만들텐데
shopping-cart-context.jsx(쇼핑 장바구니 컨텍스트)로 하겠습니다
물론 말씀드렸듯 파일명은 임의로 정하시면 됩니다
-context 라는 부분을 제외시키고
shopping-cart 라고만 하거나, 그 어떤 것이라도 괜찮지만
여기에서는 파일명에 -context 를 붙여서
이 파일로 리액트 컨텍스트 값을 관리한다는 것을 명확히 하겠습니다
이제 여러분은 리액트에서 특정 기능을 불러와
이러한 컨텍스트 값을 생성할 수 있습니다
꼭 import 로 불러와야 하는 함수는
createContext 입니다
다음 단계로 이 함수를 입력하면
해당 컨텍스트 값을 생성하게 될 것입니다
이후에는 해당 값을 여러분이 원하는대로
변수 또는 상수에 저장하면 되는데
CartContext 라는 상수를 예시로 들겠습니다
이름은 여러분 마음대로 지으셔도 됩니다만
저는 의도적으로 첫글자를 대문자로 사용했습니다
여기의 대문자 C 같은 경우인데
createContext 로 만들어진 이 값은
사실 리액트 컴포넌트가 들어있는 객체인데
나중에 필요하게 될 것입니다
이 컨텍스트는 이 상수에 넣어 두겠습니다
다음 단계에서 여러분은
초기값으로 사용할 특정 값을
createContext 에 전달하여
리액트 앱에서 이 컨텍스트로 감쌀
모든 컴포넌트에
이 값이 전달되도록 할 수도 있는데
조금 후에 이 컨텍스트로 컴포넌트를 묶는 방법과
컴포넌트에 값을 제공하는 방법을 보여드리도록 하겠습니다
이 컨텍스트 기능을 이용해 컴포넌트에 제공할 값은
여러분이 원하는 그 어떠한 값이라도 괜찮습니다
숫자나 문자열뿐만 아니라
객체나 배열도 괜찮습니다
여기서는 객체로 진행해 볼텐데
items 속성을 가진 객체로
처음에는 빈 배열로 만들어 두겠지만
나중에는 장바구니 물건들이 들어가게 됩니다
제가 처음으로 추가할 것은 이것입니다
값으로 단순히 배열을 전달하는 것도 가능하지만
그렇게 하는 대신 저는 이 속성을 가진
객체를 사용했습니다
곧 이 컨텍스트 객체에 추가할 것이 있어서입니다
그렇지만 일단은, 이렇게 컨텍스트를 만들어 두었습니다
다음 단계는 이 앱과
우리 컴포넌트에 이것을 제공하는 것입니다
이제 앱에 이 컨텍스트를 제공해 주어야 하는데
그리고 앱의 일부분, 말하자면 컴포넌트 트리의
일부분을 묶어주어야 합니다
그래야만 한데 묶인 컴포넌트들이 우리가 제공하는 값에
접근할수 있기 때문입니다
우선적으로, 컨텍스트 제공을 위해
외부에서도 이 파일의 사용이 가능하도록
export 를 통해 밖으로 내보내는 것이 필요합니다
다음으로는
이 컨텍스트를 필요로 하는
모든 컴포넌트를 담고 있는
컴포넌트를 찾아 열어 줍니다
예를 들자면 우리 앱 컴포넌트와 같은 것입니다
앱 컴포넌트 안에는
Header, Shop, Product 와 같은 컴포넌트가 모두 들어 있는데
예를 들어 Product 컴포넌트의 경우
이 항목 배열을 업데이트하기 위해
컨텍스트에 넣어둔 값을
나중에 변경해야 할 때 필요합니다
Header 컴포넌트에 중첩되어 있는 컴포넌트 중
정확히 하자면 이 Cart 컴포넌트인데
이것은 항목을 읽어서 출력하고
업데이트하는 데에 필요합니다
그렇기에 앱 컴포넌트는 컨텍스트를 이용해
Header와 Shop을 감싸기 용이한 위치라고 볼 수 있는데
이러한 컴포넌트 또는 자식 컴포넌트가
해당 컨텍스트를 사용할 수 있어서입니다
그렇기에 일단 좀 전의 store 폴더에 생성해둔
CartContext 를 불러와서
shopping-cart-context.jsx 파일을 가져오겠습니다
이렇게 가져온 후에는
이것으로 Header와 Shop을 감싸면 됩니다
앞서 대문자를 이용한 이름을 지은
이유가 바로 이것인데
이제 이 컨텍스트를 컴포넌트로 사용할 것이기 때문입니다
정확히 하자면, Provider라고 하는
리액트가 생성한 컨텍스트 객체의
속성을 사용하겠습니다
이것이 우리가 실제로 사용하게 될 컴포넌트입니다
이것과 같이
컴포넌트의 이름에 온점이 들어가 있는 경우를
한 번도 보지 못하셨을 수도 있을 텐데
특정 오브젝트 안에 중첩된 속성이 실질적인 컴포넌트가 되는 경우
이 또한 JSX 파일로써 유효해집니다
Header나 Shop 과 같은 컴포넌트를
무작정 사용할 수는 없지만
중첩된 속성의 값이 유효한 리액트 컴포넌트라면
이를 컴포넌트로 사용할 수 있습니다
그리고 이 Provider 속성은
이처럼 유효한 리액트 컴포넌트를 가지고 있습니다
그러니 CartContext.Provider 를 이용해서
Header와 Shop을 묶어 주겠습니다
중요한 부분은
이 Provider라는 속성은 우리가 생성한 것이 아니며
제 컨텍스트 값은 보시는 바와 같이 항목 속성만을 갖고 있습니다
그러나 CartContext 상수에 넣어둔
createContext로 생성된 객체와
createContext에 값으로 전달되는
저의 객체 간에는
차이점이 존재합니다
저의 값은 그 컨텍스트를 통해 이용이 가능하지만
여기 있는 컨텍스트
이 컨텍스트 객체는 리액트에 의해 생성되었고
보시다시피 이런 Provider 컴포넌트를 갖고 있고
그렇기에 우리는 그 컨텍스트를 제공하는 것입니다
다음 시간에는 데이터 출력을 위해
컴포넌트에서 이것을 사용해 보겠습니다