Context API의 WHAT 및 WHY - 1부

이봐, 동료 학습자! 이 블로그에서는 React Context에 대해 논의할 것입니다. 나는 게으르고 길고 피곤한 블로그를 쓰고 싶지 않았기 때문에 이것을 두 부분으로 나누었습니다. 1부에서는 Context 뒤에 필요한 모든 이론을 다루고 2부에서는 Context를 사용하는 방법에 대한 코드를 다룹니다. 따라서 코드를 찾으려면 다음 블로그를 참조하십시오. 그렇지 않으면 앞으로 나아가자!

아무도 자신의 데이터가 한 구성 요소에서 다른 구성 요소로 미친 듯이 흐르는 것을 원하지 않기 때문에 상태 관리는 React로 작업하는 동안 항상 골칫거리였습니다. 그리고 React의 단방향 데이터 흐름(상위 구성 요소에서 하위 구성 요소로)은 소품 드릴을 피하기 위해 데이터가 어디에 있어야 하는지 파악하기가 훨씬 더 어렵습니다.

프롭 드릴링이란 무엇입니까?

Home이라는 구성 요소가 있다고 가정해 보겠습니다. 홈에는 로그인한 사용자와 관련된 모든 데이터가 있습니다. 이제 홈에는 호텔이라는 하위 구성 요소가 있습니다. 여기에는 BookHotel이라는 다른 구성 요소가 있습니다. 이 BookHotel 구성 요소는 성공적으로 예약하려면 사용자 데이터가 필요합니다.



그렇게 하기 위해 우리가 일반적으로 하는 일은 사용자의 데이터를 Hotels 구성 요소로 전달한 다음 BookHotels에 소품으로 전달하는 것입니다. 따라서 소품을 구성 요소로 드릴링한다고 말할 수 있습니다. 여기서 문제를 감지할 수 있습니까?

호텔 구성 요소는 데이터가 전혀 필요하지 않지만 단방향 데이터 흐름 제약으로 인해 홈에서 소품으로 사용자 데이터를 가져와 하위 구성 요소로 전달해야 합니다. 이것은 지금은 그다지 번거롭지 않게 들릴 수 있지만 5~6레벨 더 아래에 있는 구성 요소로 전달되는 경우를 상상해 보십시오. 모든 중간 구성 요소는 올바른 구성 요소가 데이터를 수신하는지 확인하면서 무의미한 작업을 수행할 것입니다. 필요하지 않은 구성 요소에 데이터를 전달하는 이 프로세스를 소품 드릴링이라고 합니다.

이제 여러분은 처음부터 호텔 구성 요소에 데이터를 보관하지 않는 이유가 무엇인지 논쟁할 수 있습니다. 자, 잠시 우리가 그렇게 했다고 가정해 봅시다. 하지만 Home 아래에 Flights 구성 요소가 있다면 어떨까요? 이 Flight 구성 요소에는 사용자 데이터도 필요한 BookFlight 구성 요소도 있습니다.



그러나 데이터가 상위 구성 요소로 흐를 수 없기 때문에 사용자 데이터가 호텔에서 집으로 그리고 항공편으로 흐르도록 할 수 없습니다. 신중하게 데이터를 올바르게 배치하지 않으면 우리가 하게 될 엉망진창이 보이시나요?

따라서 이 모든 문제로부터 우리를 구하기 위해 React 버전 16은 Context API 개념을 도입했습니다.

컨텍스트는 기본적으로 React에 내장된 API로, 그 어느 때보다 데이터 액세스를 더 간단하게 만듭니다. 데이터를 필요로 하는 모든 구성 요소가 데이터를 소품으로 전달하지 않고 데이터에 액세스할 수 있도록 도와줍니다. 컨텍스트를 모든 구성 요소에서 사용할 수 있는 전역 변수로 생각할 수 있습니다.



그렇다면 Context를 사용하여 어떤 종류의 데이터를 정의해야 할까요?

데이터가 업데이트될 때마다 해당 데이터에 액세스하는 모든 구성 요소가 다시 렌더링됩니다. 이로 인해 구성 요소 간에 갑자기 다시 렌더링될 수 있습니다. 그렇기 때문에 자주 업데이트되지 않는 데이터만 ContextAPI를 사용하여 정의해야 합니다. Context는 Redux와 같은 상태 관리 도구가 아니라 데이터 소비를 더 쉽게 만드는 데만 사용된다는 점에 유의해야 합니다.

따라서 다음과 같은 데이터:

theme data
user data (currently authenticated user)
location-specific data

ContextAPI를 사용하여 정의할 수 있는 이상적인 데이터 유형입니다.

오랫동안 읽은 내용이라는 것을 알고 있지만 이제 Context가 무엇이며 왜 필요한지 명확하게 이해하셨기를 바랍니다. 이제 다음 블로그에서 코드로 직접 이동하여 이를 설정하는 방법을 살펴보겠습니다.

읽어주셔서 정말 감사합니다! 이것이 어떤 식으로든 도움이 되었다면 댓글로 알려주세요. 또한 블로그 작성이 처음이기 때문에 솔직한 피드백에 정말 감사드립니다.

계속 배우도록!