탭메뉴 만들기

이번에는 탭 메뉴에 있는 버튼 클릭을 통해 다른 페이지로 넘어가는 기능을 구현하기!
이런 작업 하나하나를 하면서 드는 생각은,
내가 핸드폰을 사용하면서 당연하게 사용했던 기능들이
참 복잡하게 만들어진거구나- 싶은 생각을 하게 된다 😖

우선, 내맘대로 만들어보기 😎

repository 권한 공유(?)

작업을 시작하기 전에
ethan과 작업했던 것 처럼, organization을 만들어야 하나- 리서치를 하다 보니
딱히 여러 프로젝트를 하지 않는 이상 하나의 저장소를 공유해서 작업해도 될 것 같아서
내 깃허브에서 저장소를 만들어서 권한을 moon에게 열어주었다.

내가 로컬에서 작업하는 것 처럼 moon도 본인 로컬에서 작업해서 올리면
똑같이 적용이 되는건지는 모르겠지만...
우선 저장소는 만들어두고!
너무 처음하는 작업이기 때문에 test 작업을 거친 후 올려보기로..

screen 작업시작.

사실 처음에 tab navigation이 있는지도 모른채 내맘대로 만들어보고자
<View>로 메뉴구역을 만들어서 버튼들을 집어넣은 후
스크린 하단으로 내려서 만들어보았다.

📌 화면전환을 위한 구조

아직 전체적인 구조를 파악한 것은 아니지만,
App.js에서 기존에 react route를 작업했던 것 처럼 구조를 잡아주는 것이 필요했는데
그게 <NavigationContainer>이다.

이전에 설치했던 @react-navigation/native을 통해서 사용이 가능하고
최상위 컴포넌트로서 <Stack.Navigator>와<Stack.Screen>을
감싸주면 화면전환이 가능해진다.

또한 Route를 사용했던 것 처럼 <Stack.Screen> 태그 안에 component를
연결해주면 해당 화면으로 이동이 가능해진다.

const Stack = createStackNavigator();

export default function App() {
  return (
   <NavigationContainer>
    <Stack.Navigator>
     <Stack.Screen name="WE'SH" component={MainScreen} />
     <Stack.Screen name="Album" component={AlbumScreen} />
     <Stack.Screen name="Calendar" component={CalendarScreen} />
     <Stack.Screen name="WishList" component={WishListScreen} />
     <Stack.Screen name="Letter" component={LetterScreen} />
    </Stack.Navigator>
   </NavigationContainer>
  );
}

여기서☝🏻 name은 화면 상단에 뜨는 Screen의 이름을 지정하는 것이다.

📌 이름을 맞춰주는게 중요해요

처음 발견한 예제를 아무것도 모르고 무작정 따라서 입력한 후
하나하나씩 원하는 단어로 바꿔보면서 알게된 것은,
navigation을 이용하려면, 해당 이름을 잘 맞춰줘야 오류가 안난다는걸 알게 되었다.

위에서 입력한 <NavigationContainer>의 screen에서 지정한 이름과,
버튼에 넣는 onPress에서의 name이 🔽
onPress={() => navigation.navigate("name")}
일치해야 오류가 나지 않는다.

📌 시행착오

이렇게까지 만들고 나서야 방법이 틀렸다는걸 깨닫게 되었다.
왜냐면,

• 그냥 MainScreen에만 독립적으로 만들어서 넣은 것이기 때문에
  버튼을 클릭해서 해당 스크린으로 들어가면 메뉴바가 없어지게 되었다.
• 생각해보니 메뉴바에 MainScreen으로 이동할 수 있는 버튼도 필요했다.
• 배경색상도 전체 screen에 적용되게 할 수 있도록 해야했다.

Tab Navigation이라는 것이 있었고,
screen 하단에 탭메뉴를 넣을 수 있는 라이브러리가 있다는걸 알게 되었다.
그래서 우선 이런 것들이 어떻게 작용하는지 배웠다 치고,
새로이 @react-navigation/bottom-tabs를 설치해서
하단에 탭메뉴를 넣어보도록 해야지!