react native [로그인, 회원가입, 로그아웃]

 

들어가며

처음에는 단순히 GPT를 활용해서 화면을 간단히 구현하고 넘겨버릴 생각이었는데, 역시 내가 원하는대로 gpt에게 입력하는 것도 쉽지 않고 직접 공부해가면서 구조나 평소에 잘 안해본 부분만 도움을 받으니 꽤나 내가 학습하는 것도, 작업이 진행 완료된 (1차적으로) 부분도 많았다.

작업  8/1

• src/navigation
  
  • src/navigation/AppNavigator.tsx
  • src/navigation/AuthNavigator.tsx
  • src/navigation/MainNavigator.tsx
  • src/navigation/RootStackParamList.ts
• react의 navigation에 대해선 아래에서 좀 더 자세히 다루도록 함.

• src/screens/Auth/LoginScreen.tsx
  api에서 함수를 import 해온다.
  React.FC에 대해선 공부가 더 필요하다. 스터디 후 문서를 남기도록 할 예정이다. 꼭 공부하자.
  AsyncStorage를 통해 로그인 상태를 관리하게 했다.
  그로 인해 최초 화면을 따로 구성하지 않아도 되게 되었다.
  로그인 세션이 사라져있을 경우 로그인(회원가입)을 다시하고, 그렇지 않은 경우 메인화면으로 바로 넘어간다.
  
  
• src/screens/Habit/RegisterScreen.tsx
  회원가입 처리
  
  
• src/screens/MainScreens.tsx
  메인 화면 처리
  
  
• src/services/api.ts
  애플리케이션에서 서버와의 통신을 처리하기 위한 모듈이다.
  HTTP 요청을 관리하는 함수를 정의해두었다.
  axios를 통해 HTTP 요청을 처리하도록 했다.
  BASE_URL의 경우 아직은 내 로컬 ip로 해두었다. (react-native-config 사용 .env에 보관)
  백엔드 개발시 controller에 명시해둔 endpoint와 명세에 맞게 axios로 적절하게 요청을 보낸다.
  

Screen과 api 부분을 정리하자면 api에서 정의해둔 걸로 서버에 요청을 보내고, 그에 따른 응답을 Screen에서 처리하게 된다.

• App.tsx
  애플리케이션의 루트 컴포넌트를 정의한다.
  앱의 구조와 네비게이션을 설정했다.
  useState, useEffect, AsyncStorage를 사용해서 로그인 상태 확인, 관리를 해주었다.
  (useState, useEffect에 대해선 아직 완벽히 이해를 하지 못했으므로 따로 스터디 문서를 남기자.)
  NavigationContainer, Stack.Navigator을 사용하여 화면 전환을 관리하게 했다.
  
  
• index.js
  애플리케이션의 entrypoint(진입점)
  역할: 앱의 루트 컴포넌트를 등록, 애플리케이션을 실행 (*component: 재사용 가능한 각각의 독립된 모듈, 요소)
  AppRegistry 는 앱의 실행을 시작하는 것을 담당한다.

 

추가

1. options

<AuthStack.Screen

name="Main"

component={MainScreen}

options={{headerShown: false}} // 네비게이션 바 숨기기

/>

위와 같이 옵션을 줄 수 있다.

2. @format

@format 주석은 코드 파일이 자동으로 포맷팅되도록 지정하는 데 사용된다.

 

3. React Navigation

React native 에서 네비게이션을 구현할 수 있는 패키지

**네비게이션 구조는 애플리케이션의 화면 전환 방식을 설계하는 방법을 말한다.

모바일 애플리케이션에서 네비게이션은 사용자가 앱 내에서 다른 화면으로 이동할 수 있게 하는 중요한 요소이다.
이에 대한 gpt의 설명은 다음과 같다. 꽤나 유용하게 정리해준 것 같다..

• 화면 (Screen): 애플리케이션 내에서 사용자에게 표시되는 개별적인 페이지 또는 뷰입니다. 예를 들어, 로그인 화면, 홈 화면, 프로필 화면 등이 있습니다.
• 네비게이터 (Navigator): 화면 간의 전환을 관리하는 컴포넌트입니다. 네비게이터는 화면을 그룹화하고, 화면 간의 전환 방식을 정의합니다. 주요 네비게이터 유형은 다음과 같습니다:
  • Stack Navigator: 화면을 스택(쌓인) 형태로 관리합니다. 사용자가 화면을 이동하면 새로운 화면이 스택 위에 쌓이고, 뒤로 가기 버튼을 클릭하면 이전 화면으로 돌아갑니다.
  • Tab Navigator: 화면을 탭으로 관리합니다. 화면 하단에 탭 바를 표시하여 사용자가 탭을 클릭해 화면을 전환할 수 있습니다.
  • Drawer Navigator: 화면을 사이드 메뉴(드로어)로 관리합니다. 사용자가 화면의 가장자리를 스와이프하거나 메뉴 버튼을 클릭해 사이드 메뉴를 열 수 있습니다.
• Navigation Tree: 애플리케이션 내의 모든 네비게이터와 화면을 계층적으로 구성한 구조입니다. 트리는 네비게이터와 화면이 어떻게 연결되어 있는지를 나타냅니다.

 

 

BottomTabNavigation, DrawerNavigation, StackNavigation 등의 네비게이션을 통해 UX 제작 

const [initialRoute, setInitialRoute] = useState<'Login' | 'Main'>('Login');
.
중략
.
return (
	<NavigationContainer>
		<Stack.Navigator initialRouteName={initialRoute}>
		<Stack.Screen name="Login" component={LoginScreen} />
 		<Stack.Screen name="Register" component={RegisterScreen} />
 		<Stack.Screen name="Main" component={MainScreen} />
 		</Stack.Navigator>
	</NavigationContainer>
)

네비게이션은 View(화면 구성) 요소들의 최상단에 위치한다. 
view를 표현하는 가장 상단 컴포넌트를 NavigationContainer로 감싸준다.

• NavigationContainer
  탐색트리를 관리, 탐색 상ㄹ태를 포함하는 구성요소
  모든 네비게이터 구조를 래핑해야한다.
• Stack.Navigator
  콘텐츠를 렌더링 하는 구성요소
  initialRouteName 을 통해 기본 페이지를 설정
• Stack.Screen
  name, component가 들어간다.
  화면 별 옵션을 넣어줄 수 있다. 
  options={{headerShown: false}} // AuthNavigator 내부에서 네비게이션 바를 숨김
• navigation.navigate("page")
  다음 페이지로 이동 (home으로 해두면 popToTop 과 같은..)
• navigation.push("page")
  push 탐색 스택에 새 경로 추가
• navigation.goback()
  이전 페이지로 이동
• navigation.popToTop()
  맨 처음 스택으로 돌아감
  첫 페이지에서 goback()을 하면 앱이 꺼지게 된다. (아직 테스트는 못해봄)

네비게이션의 개념은 계속 써보면서 익혀가는게 좋을 것 같다.