React Hooks 및 Context API를 통한 손쉬운 상태 관리

React Hooks 및 Context API를 통한 손쉬운 상태 관리

 

컨텍스트를 사용하여 구성 요소 간에 상태 공유

Unsplash의 NASA 사진

상태 관리는 React 개발자에게 압도적인 작업처럼 보일 수 있습니다. 과거에는 구성 요소 트리의 다른 부분에서 공유된 상태를 유지 관리하는 것이 매우 복잡했으며 일반적으로 타사 상태 관리 라이브러리에 의존하여 도움을 받았습니다. 그러나 우리의 생각을 업데이트할 때입니다!

후크와 컨텍스트 API가 있으므로 React의 상태 관리가 쉽습니다. 이미 사용하고 있는 도구와 React에 내장된 도구만 사용하여 앱 전체에서 상태를 관리하는 방법을 살펴보겠습니다!

React 앱에서 상태를 관리하는 문제에 직면했을 때 일부 개발자는 모든 문제를 해결하기 위해 Redux와 같은 상태 관리 라이브러리를 빠르게 찾을 수 있습니다. 그러나 우리가 해야 할 일에 대해 신중하게 생각한다면, 우리가 고려하고 있는 상태 부분이 글로벌할 필요가 전혀 없다는 것을 깨달을 수 있습니다.

예를 들어 알림 구성 요소를 빌드한다고 상상해보십시오. 이 구성 요소는 백엔드에서 오는 미리 알림 및 작업을 인식하고 사용자가 읽고 본 것으로 표시할 수 있도록 측면 서랍에서 사용할 수 있도록 해야 합니다.

옵션 1 — 복잡한 것

Redux를 염두에 두고 있다면 GET 요청을 하고 데이터 저장소에 알림을 추가하는 작업을 감속기로 보내는 매우 복잡한 썽크 작업을 구현해야 한다고 빠르게 생각할 수 있습니다. 알림 창 구성 요소의 props에 상태를 매핑하여 액세스합니다.

사용자가 알림을 읽음으로 표시하면 다른 디스패치 썽크 작업이 시작되어 백엔드에 POST 요청을 보내고 성공하면 데이터 저장소에서 해당 특정 항목을 제거하는 다른 작업이 디스패치됩니다.모자가 너무 복잡해!!

옵션 2 — 당신의 삶을 더 쉽게 만드십시오

우리가 이 문제에 대해 신중하고 창의적으로 생각할 때, 이것이 글로벌 상태의 일부일 필요가 전혀 없다는 것을 깨달을 수 있습니다. 알림 구성 요소는 실제로 이 데이터를 인식해야 하는 유일한 구성 요소입니다.

사실, 그것은 아마도 상태 조금도! 알림을 가져오고 반환하고, markAsRead 요구? 그 복잡한 상태 관리 스파게티 코드는 모두 정리되고 구성 요소에서 추상화되어 구성 요소에서 단 한 줄로 사용될 수 있습니다!

(이 기술을 사용하는 방법에 대한 자세한 설명은 React-Query를 사용한 비동기 상태 관리를 확인하세요.)

우리의 생각을 조정함으로써 우리는 매우 깨끗한 구성 요소로 끝납니다. 완전한 상태 관리 시스템의 구현보다 훨씬 더 읽기 쉬운 사용자 정의 후크. 또한 어떻게/무엇을 가져올지를 변경해야 하는 경우 유지 관리가 훨씬 더 쉬울 것입니다.

즉, 구성 요소 트리의 매우 다른 부분에서 상태를 공유해야 하는 경우가 있으며 위의 기술은 작동하지 않습니다. 이는 사용자가 백엔드에서 응답에 액세스해야 하는 것과는 반대로 선택/사용되는 데이터를 제어할 수 있기를 원할 때 특히 그렇습니다. 이것이 Context API가 빛나는 곳입니다!

React의 Context API는 모든 단일 구성 요소에 props를 전달할 필요 없이 구성 요소 트리의 깊은 상태에 액세스할 수 있는 방법을 제공합니다("prop 드릴링"이라고 함).

이 API는 앱 전체에서 공유되는 간단한 상태를 관리해야 하는 거의 모든 경우를 다룹니다. 이 기술을 구현하려면 두 가지 관련 조각을 만들어야 합니다. 공급자 그리고 훅 제공자로부터 상태에 액세스하기 위한 것입니다.

이 예에서 야구 통계 앱이 있다고 가정해 보겠습니다. 사용자는 상단 메뉴 모음에서 팀을 선택할 수 있으며 앱의 모든 페이지는 이제 해당 팀에 특정한 데이터를 사용합니다.

예를 들어, 사용자가 현재 명단을 보여주는 페이지에 있고 상단 메뉴 모음에서 Boston Red Sox를 선택합니다. 그들은 이제 Red Sox의 현재 명단을 봅니다. 그들이 현재 타율 통계를 보여주는 페이지로 이동할 때 우리는 사용자가 각 페이지에서 팀을 다시 선택해야 하는 기본 팀 대신 Red Sox에 대한 해당 통계를 보기를 원합니다(UX가 좋지 않습니다! ).

Context API가 없으면 이 간단한 요구 사항은 매우 구현하기 복잡함. 우리는 구성 요소 트리 전체에 걸쳐 props를 통해 팀을 전달해야 하거나("prop 드릴링") 수건을 던져 무거운 타사 상태 관리 라이브러리를 사용해야 합니다(yuck!).

컨텍스트를 사용하는 경우 이 기능의 구현이 어떻게 보일지 다음과 같습니다.

이것은 모든 것을 처리합니다! 컨텍스트에 정확히 무엇이 저장됩니까? 우리는 allTeams, 백엔드에서 반환된 모든 팀 개체의 배열입니다. 이것은 사용자가 선택한 팀을 변경할 수 있도록 상단 메뉴 표시줄에 넣을 선택 구성 요소에 대한 옵션을 만드는 데 사용할 수 있습니다.

우리도 가지고있다 team 우리가 팀으로 사용할 현재 사용자가 선택한그리고 setTeam 사용자가 선택을 변경할 때 호출할 수 있는 onChange 팀 선택 구성 요소).

후크 사용

이제 이걸로 무엇을 할까요? 컨텍스트에 저장된 이러한 모든 데이터 조각은 useTeamContext 후크를 파일 하단에 내보냅니다. 그 후크를 실제로 어떻게 사용할까요? 다음은 사용자가 앱 전체에서 사용할 팀을 선택할 수 있도록 하는 선택 구성 요소의 예입니다...

디스패치도, 셀렉터도, 아무것도! 필요한 데이터와 앱 전체에서 선택 항목을 변경하는 기능을 모두 제공하는 깨끗하고 간단한 후크입니다.

우리가 만든 후크가 우리가 가장 자주 사용하게 될 것이지만 Provider도 마찬가지로 중요합니다!

공급자는 어떻습니까?

우리는 우리의 만 사용할 수 있습니다 useTeamContext 훅의 자손 컴포넌트에 있을 때 Provider. 이것은 우리의 동안 구성 요소 children 소품으로!

앱 전체에서 컨텍스트 후크를 사용하려면 TeamsProvider 구성 요소 트리에서 구성 요소가 정말 높습니다. 실제로 공급자를 보는 것은 매우 일반적입니다. 이는 전체 애플리케이션이 제공하는 것과 동일한 컨텍스트에 액세스할 수 있음을 의미하기 때문입니다.

많은 경우 우리는 생각을 조정하고 상태 저장 데이터에 액세스해야 하는 항목/액세스 방법을 실제로 평가하여 타사 상태 관리 라이브러리의 함정과 복잡성에서 벗어날 수 있습니다.

여러 번 우리는 우리의 요구를 충족시키기 위해 매우 간단한 후크를 구현할 수 있습니다. 때때로 우리는 실제로 구성 요소 트리의 매우 다른 부분에 있는 구성 요소 간에 상태를 공유할 수 있는 방법이 필요합니다.

이러한 경우 React의 내장 Context API가 매우 유용합니다! 이 API에 익숙해지면 깨끗하고 유지 관리 가능하며 읽기 쉬운 코드를 작성하는 데 도움이 됩니다. 당신의 팀과 미래의 자신이 감사할 것입니다!