Main 화면을 설정한 Stack.Screen을 보면 options Props에 일반 객체가 아닌 객체를 반환하는 함수를 넣어줬습니다. 이렇게 함수를 넣어주면 내비게이션의 상태가 바뀔 때마다 함수를 다시 실행하여 화면의 options 객체를 생성합니다. 이 함수에서는 파라미터를 통해 route와 navigation을 받아와서 사용할 수 있는데요. 해당 함수 내부에서 getHeaderTitle이라는 함수를 호출하여 route 객체로 화면의 제목을 받아오도록 설정했습니다.
getHeaderTitle은 우리가 직접 만든 함수입니다. 이 함수 내부에서는 getFocusedRouteName FromRoute라는 함수를 리액트 내비게이션 라이브러리에서 불러와서 사용합니다. getFocused RouteNameFromRoute 함수는 route 객체를 통하여 현재 포커스된 화면의 이름을 조회합니다. 만약 Main 화면 내부에 있는 머티리얼 하단 탭 내비게이터에서 화면이 바뀌면 이 함수를 통해서 어떤 화면이 보이고 있는지 알 수 있습니다. 코드를 저장한 뒤 콘솔을 보면 가장 처음에 undefined가 출력되고 그 이후 탭을 전환하면 선택된 탭의 이름이 나타납니다.
이 함수를 사용할 때 주의할 점은 방금 본 것과 같이 화면이 바뀌기 전까지, 즉 초기에는 undefined가 반환된다는 것입니다. 따라서 undefined일 때는 내부 내비게이터의 기본 화면의 이름을 사용하도록 로직을 구현해야 합니다.
getHeaderTitle 함수를 다음과 같이 수정해보세요.

App.js - getHeaderTitle

function getHeaderTitle(route) {
  const routeName = getFocusedRouteNameFromRoute(route) ?? 'Home';
  const nameMap = {
    Home: '홈',
    Search: '검색',
    Notification: '알림',
    Message: '메시지',
  };

  return nameMap[routeName];
}