뮤네틱 앱 상단 바 구현 상태
구현 로직
App.tsx 에서 상단 바를 공통 헤더 컴포넌트로 주고 나머지 라우팅 컴포넌트들이 하단에 보여지는 형태로 만들었다.(하지만 구현하면서 공통 헤더로 넣지말고 페이지별로 상단에 넣어주는게 맞다는 생각이 커짐....)
페이지별로 보여줘야할 버튼 이름이 달랐기 때문에 현재 경로를 useLocation().pathname으로 가져와서 경우를 처리해주었다.
바뀌는거까지는 문제가 없었는데.. 실제 해당 페이지에서 수정이나 저장 등 버튼을 클릭했을 때 onClick 이벤트를 listen 해야했는데 위에서처럼 라우팅 컴포넌트와 <TopBar /> 컴포넌트가 형제 컴포넌트 구조로 되어있어서 props 로 onClick 함수를 전달하지 못하는 상황이 생겼다. 그래서 고민하다가 전역 상태 변수를 하나 만들어서 버튼 클릭시 변수값을 변화시켜서 해당 페이지에서 useEffect 로 리렌더링을 발생시키는 방법을 사용하였다.
// TopBar.tsx
...
// 버튼을 클릭하면 write 라는 전역 상태값을 변화시킨다.
const onClickWrite = (rightText: string) => {
if (rightText === '등록' || rightText === '수정' || rightText === '저장') {
actions.setWrite(true);
}
};
...
// ClassWrite.tsx
...
// 레슨 등록 컴포넌트에서 useEffect로 write 전역 상태의 변화를 감지하여 이벤트 실행
useEffect(() => {
if (state.write) {
if (validateWriteForm()) {
LessonAPI.postLesson(Number(userData?.id), classInfo)
.then(res => {
madeClassId = res.data.data.lesson_id;
actions.setWrite(false);
navigate(`/lesson/class/${madeClassId}`, { replace: true });
})
.catch(e => {
console.log(e);
});
}
actions.setWrite(false);
}
}, [state]);
결과적으로 작동은 잘 하지만 전역 상태 변수를 만들어줘야한다는 점이 불편하다면 공통 헤더 컴포넌트로 만들지 않고 라우팅 컴포넌트마다 헤더에 넣어주는 방법을 사용하여도 됩니당..