해결방법을 다루기 전에
문제를 먼저 살펴보도록 하겠습니다
리액트 개발자로서의 일반적인 업무가
다수의 컴포넌트로 이루어진 앱을 만드는 것이기 때문입니다
여러분의 리액트 앱이 복잡할수록
더 많은 컴포넌트를 사용하게 될 것입니다
앞서 배우셨던 것과 같이, 이러한 컴포넌트는
보시는 것과 같은 컴포넌트 트리로 구성되어 있는데
예를 들자면, App이라는 컴포넌트에서
Shop과 Header라는 컴포넌트가 각각 생성되고
이로부터 또다른 자식 컴포넌트가 만들어지는
과정이 반복되는 것입니다
대부분의 앱에서 여러분들은 컴포넌트뿐 아니라
상태의 관리 또한 해야 할 것입니다
온라인 쇼핑 사이트를 만드는 중이라는 가정 하에
장바구니 상태 관리를 예시로 들어 보겠습니다
대부분의 경우 해당 상태를 끌어올려야 하는데
그 이유는 이것이
트리 안의 특정 컴포넌트에 사용되고
출력되는 와중에
동일한 컴포넌트 트리 내에 구성되어 있지만
완전히 다른 곳에 위치한 컴포넌트에서
업데이트될 수도 있기 때문입니다
그렇기에 여러분들은 이미 보고 배운 바와 같이
모든 컴포넌트에 접근할 수 있고
해당 상태를 필요로 하는 컴포넌트를
관리해 주어야만 할 것입니다
이를 위해 속성(prop)을 이용한
공유와 업데이트가 이루어져야 하고
최종적인 상태 수정을 위해
이 함수를 가진 속성을 이용해야 합니다
이것이 바로 여러 데모 프로젝트를 통해
여러분들이 보고 배운 것입니다
이를테면 이전 섹션에서 우리가 살펴본
좀더 큰 데모 프로젝트에서도 본 적이 있습니다
이 표에서 보여지는 것 뿐만 아니라
지난 섹션 데모 프로젝트의
코드를 통해 보셨다시피
이러한 경우 여러분은 여러 층의 컴포넌트를 거쳐
공유하고자 하는 데이터를 넘겨주어야 합니다
이것을 프로퍼티 내리꽂기(prop drilling)이라고 합니다
다수의 컴포넌트를 거쳐 속성을 전달하는데
사실 대부분의 컴포넌트가 그 데이터를 직접적으로 필요로 하지는 않습니다
그저 자식 컴포넌트에게 전달하는 역할을 맡게 되는 것입니다
그런데 이것은 문제를 야기할 수 있습니다
원하는 공유 데이터를 얻기 위해서는
여러 컴포넌트가 필연적으로 사용되어야만 하는데
이럴 경우 해당 컴포넌트의 재사용이 다소 힘들어지기 때문입니다
또한 어쩌면 반복될 이 과정을 위해
컴포넌트의 속성을 받아들여 구조를 바꾼 뒤
그 속성을 또다시 컴포넌트로 보내주어야 하기 때문에
여러분이 추가적인 상용구 코드(Boilerplate)를
아주 많이 써내야 한다는 것을 의미하기도 합니다
그렇기에 본 강의에서는
이 문제를 해결하기 위한 몇 가지 해결방안을
살펴보도록 하겠습니다
이번 섹션에서는
완전히 새로운 프로젝트를 준비했습니다
그렇기 때문에 혹시라도
여러분이 이전 수업에 함께 하지 못해서
다른 데모 프로젝트를 구성하는 동안
우리가 경험해 볼 수 있었던 프로퍼티 내리꽂기와
이것이 얼마나 성가셔질 수 있는지 앞서 보지 못하셨더라도
충분히 함께 따라오실 수 있습니다
이번 섹션에서는 완전히 새로운 프로젝트를 다루기에
어느 쪽이든 따라오실 수 있습니다
이 프로젝트에서 우리는 한 온라인 샵의
쇼핑카트, 즉 장바구니에 물건을 담고
그 장바구니를 볼 수도 있고
장바구니 안의 물건을 원하는 대로
변경하거나 지워버릴 수도 있습니다
결제창으로 이동하기 위해 버튼을 클릭하면
장바구니가 닫히게 될 겁니다
완성된 온라인 쇼핑몰에는
장바구니 기능만이 활성화 되어 있기 때문입니다
그럼에도 이 쇼핑몰 프로젝트에서는
이미 여러 컴포넌트를 사용하고 있는데
초기 프로젝트에서 찾을 수 있고
로컬 버전뿐 아니라 코드샌드박스 버전에서도
첨부된 것을 찾아볼 수 있습니다
그리고 프로젝트의 이 부분에서는
제가 이전 슬라이드에서 보여드린
컴포넌트 구조를 볼 수 있는데
제가 준비했던 데모 프로젝트와
기본적으로 동일한 구조를 갖고 있습니다
이 데모 프로젝트에서는
앱컴포넌트에서 장바구니 관리가 가능한데
장바구니 상태와의 상호 작용을 위해
필요한 모든 컴포넌트에
앱 컴포넌트가 접근할 수 있기 때문입니다
그렇기에 장바구니 물건의 수량을 변경하거나
물건을 처음으로 넣을 때나
이미 들어있는 물건을 삭제할 때
상태 업데이트를 위한 로직 또한
앱 컴포넌트 내에 있는 것입니다
이번에는 여기 앱 컴포넌트 내의
Header와 Shop 컴포넌트를 이용할텐데
장바구니의 데이터와 더불어
물건을 추가하거나 수량 변경을 위한 함수를
Header와 Shop 컴포넌트로 보내줍니다
그러면 이 컴포넌트가 해당 데이터를 전달하게 됩니다
예를 들어 Header 컴포넌트는
디스플레이를 위해 장바구니 물품을
CartModal 컴포넌트로 보내는 것입니다
Shop 컴포넌트에서도 비슷합니다만
여기에서 장바구니 업데이트를 위한 함수를 가져다
이번에는 Product로 보내서
목록으로 출력되게 합니다
이 업데이트에 쓰이는 함수는
Shop 컴포넌트 자체에서 사용하는 것이 아닙니다
그저 전달하는 것에 불과합니다
그리고 이것이 제가 말씀드린 프로퍼티 내리꽂기입니다
이제 이 문제에 대한
해결책들을 살펴 보도록 하겠습니다