네비게이션 바 상태 관리

Question

상태 관리를 사용하여 애플리케이션을 수정하고 더 다양하게 만들려고 합니다. 기본적으로 내 앱은 Tableau 대시보드가 ​​포함된 React 웹 앱이며, 원하는 항목을 지정하는 백엔드에서 json을 읽어 앱에 특정 경로(특정 대시보드 포함)를 채워야 합니다.

두 가지 방법으로 필요합니다:

UI 프로젝트 전환을 통해 프로젝트 간 전환이 가능합니다 프런트엔드를 통한 로그인 시도로부터 JWT 수신(성공 후) 관리해야 할 유일한 상태는 탐색 표시줄과 해당 데이터인데, 이는 관련 경로를 렌더링하여 프로젝트/사용자별로 관련 대시보드를 활성화할 것입니다.

내 탐색 모음의 코드는 다음과 같습니다.

으아아아

NavbarData입니다:

으아아아

기본적으로 나에게 필요한 것은 드롭다운 전환기를 연결하여 NavbarData 내부의 json 구조 데이터를 변경하고 이러한 각 변경 사항을 상태로 정의하는 것입니다. 그럼 아주 간단한 상태 관리 작업이기 때문에 React Context를 이용해서 해결하고 싶은데 어떻게 해야 할까요?

미리 감사드립니다!

Answer 1

React Context를 사용하여 탐색 모음의 상태를 제어하세요.

§ 컨텍스트와 초기 상태를 정의하려면 NavbarContext.js라는 파일을 만듭니다.

으아악

§ NavbarProvider 구성 요소를 사용하여 앱이나 앱 내의 대상 영역을 둘러싸세요. 이 작업은 기본 파일(예: App.js)에서 수행되어야 합니다.

으아악

§ 컨텍스트를 사용하여 상태를 조작하면 이에 따라 탐색 모음 구성 요소를 수정할 수 있습니다.

으아악

§ navbar에 대한 JSON 데이터를 수신할 때(일반적으로 로그인 후) 컨텍스트에서 setNavbarData 함수를 사용하여 navbarData 상태를 업데이트할 수 있습니다.

으아악

이제 setNavbarData를 사용하여 navbarData 상태를 업데이트하면 navbar 구성 요소가 다시 렌더링되어 궁극적으로 업데이트된 데이터가 navbar에 표시됩니다.

React Router를 사용하려면 올바른 설정이 필요하며 올바른 종속성을 코드로 가져와야 합니다. 이 단계가 완료되었는지 확인하려면 메모해 두세요.