마지막으로, 반드시useEffect를 사용하여 setHeader 함수에 적절한 설정들을 담은 객체를 prop으로 넘깁니다.
headerStyle 은 필수 속성이고, title, subText, leftOnClick, rightOnClick은 선택 속성입니다.
headerStyled의 경우 위에서 import 해온 상수 객체 NAVIGATION_STATE 을 활용하여 값을 세팅하는 것을 추천합니다.
참고로 의존성 배열에는 아무것도 넣지 않거나, setHeader 함수만 넣도록 합니다.
(마운트 될 때만 헤더가 해당 페이지에 맞게 세팅되도록 해야 합니다. 또한, useEffect를 사용하지 않을 경우 렌더링이 반복적으로 일어나서 결국 성능 최적화에 방해되기도 하고, 애초에 에러가 발생하여 렌더링이 안됩니다.)
📌 관련 이슈번호
🎟️ PR 유형
어떤 변경 사항이 있나요?
✅ Key Changes
📢 To Reviewers
사용 방법은 다음과 같습니다. 각자 페이지에서 다음과 같은 코드를 작성하여 필요한 훅, 상수를 import 해옵니다. (아래의 3개는 필수입니다.)
그리고, 아래와 같이 setHeader 함수를 받아옵니다 !
const { setHeader } = useHeader();
그 후, 연결할 콜백 함수를 작성합니다. 왼쪽, 오른쪽 최소 0개 ~최대 2개가 필요합니다. (어차피 헤더엔 최대 2개의 함수만 연결됨)마지막으로, 반드시 useEffect를 사용하여 setHeader 함수에 적절한 설정들을 담은 객체를 prop으로 넘깁니다. headerStyle 은 필수 속성이고, title, subText, leftOnClick, rightOnClick은 선택 속성입니다. headerStyled의 경우 위에서 import 해온 상수 객체 NAVIGATION_STATE 을 활용하여 값을 세팅하는 것을 추천합니다.
참고로 의존성 배열에는 아무것도 넣지 않거나, setHeader 함수만 넣도록 합니다. (마운트 될 때만 헤더가 해당 페이지에 맞게 세팅되도록 해야 합니다. 또한, useEffect를 사용하지 않을 경우 렌더링이 반복적으로 일어나서 결국 성능 최적화에 방해되기도 하고, 애초에 에러가 발생하여 렌더링이 안됩니다.)
📸 스크린샷
다음은 함수도 연결한 예시입니다.
![image](https://github.com/TEAM-BEAT/BEAT-Client/assets/155794105/ee7a5e46-26d7-410c-991d-155c3737fdcd)
🔗 참고 자료