[React] 네비게이션 메뉴 useState? useSelector?

네비게이션 메뉴에 서 쓰일 정보들은 useState useSelector 어디서 관리하는게 좋을까?

 

무조건 리덕스(Redux)와 같은 전역 상태 관리 라이브러리를 사용하는 것이 훨씬 효율적이고 useState로도 구현은 가능하지만, 앱의 구조가 복잡해지고 유지보수가 매우 어려워집니다.

 

 

## 왜 리덕스가 더 효율적인가?

 

모바일 앱에서 하단 메뉴바(네비게이션 바)는 어떤 페이지에 있든지 항상 화면에 유지되는 최상위 컴포넌트 중 하나입니다. 사용자가 메뉴를 커스텀하는 화면은 보통 '설정'이나 '메뉴 편집' 같은 특정 페이지에 있습니다.

이 상황을 정리하면 다음과 같습니다.

• 메뉴를 변경하는 곳: '메뉴 편집' 페이지 (하위 컴포넌트)
• 변경된 메뉴가 표시되는 곳: 하단 메뉴바 (최상위 컴포넌트)

이처럼 서로 다른 위치에 있는 컴포넌트들이 동일한 데이터(사용자가 선택한 메뉴 목록)를 공유해야 할 때, 전역 상태 관리가 빛을 발합니다.

구분	리덕스 (useSelector)	useState
데이터 흐름	간단하고 명확 메뉴 편집 페이지 → 리덕스 스토어 → 하단 메뉴바	복잡하고 비효율적 (Props Drilling) 메뉴 편집 페이지 → 부모 → 부모 ... → 최상위 App → 하단 메뉴바
구조	어떤 컴포넌트에서든 스토어에 직접 접근 가능	상태를 공유하려면 수많은 부모 컴포넌트를 거쳐 props를 전달해야 함
유지보수	쉬움. 상태 변경 로직이 한 곳(리듀서)에 모여있어 관리 용이	어려움. 앱 구조가 조금만 바뀌어도 props 전달 코드를 전부 수정해야 함
추천 상황	바로 이 경우처럼 앱 전반에 걸쳐 공유되는 상태를 다룰 때	한두 개의 컴포넌트 내에서만 사용하는 간단한 상태를 다룰 때

 

 

## 구현 시나리오 (리덕스 사용)

 

1. 로그인: 사용자가 로그인하면, 서버로부터 해당 유저가 설정해놓은 메뉴 목록 데이터를 가져옵니다. (['홈', '환경설정'])
2. 리덕스 스토어 저장: 가져온 메뉴 목록을 리덕스 스토어에 저장합니다.
3. 하단 메뉴바 렌더링: 하단 메뉴바 컴포넌트는 useSelector를 사용해 리덕스 스토어에 있는 메뉴 목록을 가져와 화면에 그립니다.
4. 메뉴 변경: 사용자가 '메뉴 편집' 페이지에서 메뉴를 추가하거나 삭제합니다. (예: '마이페이지' 추가)
5. 리덕스 스토어 업데이트: '메뉴 편집' 페이지는 변경된 새 메뉴 목록(['홈', '환경설정', '마이페이지'])으로 리덕스 스토어의 상태를 업데이트하는 액션을 발생시킵니다.
6. 자동 리렌더링: 리덕스 스토어의 상태가 변경되었으므로, 해당 데이터를 구독하고 있던 하단 메뉴바 컴포넌트는 자동으로 리렌더링되어 즉시 변경 사항을 화면에 반영합니다.

이처럼 리덕스를 사용하면 데이터 흐름이 매우 깔끔하고 효율적으로 관리됩니다. 따라서 고민할 필요 없이 리덕스(또는 Zustand, Recoil 같은 다른 전역 상태 관리 도구)를 선택하시는 것이 정답입니다.