앱스토어 등록 일지 03. RN 프로젝트 폴더 구조 정리 & 필수 라이브러리 설치

이제 본격적으로 프로젝트를 진행하여야 한다. 먼저 구조를 살펴보고 개발에 필요한 라이브러리를 프로젝트에 설치하려고 한다. 내 입맛대로 컴포넌트 구조도 미리 잡아둘거다.

 

기본 구조 내 맘대로 다듬기

 일단 react-native init으로 프로젝트를 만들면 다음과 같은 기본 구조를 가지고 있다. 리액트와 흡사한 것 같다.

 다른 점으로 android와 ios 폴더가 생성되는데, 이는 각 OS에 맞게 빌드하거나 배포할 때 쓰인다. 나는 가볍게 무시해주고 바깥에서 작업을 할거다.

 

가장 처음 시작되는 파일은 index.js이다. 여기서 App.tsx 컴포넌트를 렌더링 해준다.

 App.tsx는 이렇게 생겼다. 실행했을 때 에뮬레이터 첫 화면에 보이는 코드이다. 스타일이 StyleSheet으로 구현되어 있는데, 이건 예전에 사용해봤으니까 이번엔 다른 CSS 라이브러리를 써 볼 예정이다.

 

 이제 폴더 구조를 조금 정리해보려고 한다. 예전에 프로젝트를 할 때는 최상단에 컴포넌트, 스크린, 유틸 이런 폴더들을 두고 개발을 했는데 최상단에서 풀어서 넣어주면 복잡해보이기 때문에 이번에는 src를 만들어서 한 곳에서 관리하려고 한다.

src 아래에 screens, components, utils, stores을 만들어 주려고 한다.

screens는 메인 페이지, components는 공통 컴포넌트, utils는 공통 유틸리티, stores는 상태 관리를 담당할 것이다. 프로젝트를 진행하면서 style 같은 것들이 추가될 수도 있을 것 같다. 프로젝트가 작다보니 공통으로 쓸 부분이 많이 없다면 components같은 디렉터리는 없어질수도 있다.

 

 src에 index.jsx를 만들었는데 screens에 들어갈 스크린들의 네비게이터 역할을 해줄 생각으로 만들었다.

일단 구조는 이렇게 가져가기로 했다.

 

필요한 라이브러리 설치하기

 이렇게 구조를 잡아두니 필요한 라이브러리가 몇 가지 생각이 들어 그것들만 설치하고 가볍게 적용하려고 한다. 일단 전역 변수 관리를 위해 상태 관리 라이브러리를 설치한다. 이 부분은 본인이 편하거나 프로젝트에 적합한 라이브러리를 받으면 된다. 나는 redux toolkit을 사용할 생각이다.

redux toolkit

아래 명령어로 redux toolkit을 설치한다.

npm install redux react-redux @reduxjs/toolkit

 

 

 store하위에 slice를 만들어 등록한다.

slice reducers에는 state 변화와 관련된 함수를 작성해준다.

 

그 다음에 App.tsx에 모든 코드를 지워버리고 Provider로 감싼다.

 Index.tsx를 Main이라는 이름으로 가져와서 넣었다. src/Index.tsx에는 src/screens/HomeScreen.tsx 하나를 만들어서 임시로 넣어준다.

 

 HomeScreen에서는-1과 +1 버튼 두 개를 만들어서 누르면 sampleCount의 숫자를 변경하도록 연결한다.

 이제 useSelector를 사용해 sampleCount를 가져와서 화면에 보여준다.

이 부분에서 useSelector를 쓸 때마다 state에 RootState 타입을 지정해주는 것이 번거로워 hook하나를 만들었다.

 이렇게 쓰면 된다. 타입스크립트 참 번거롭다.

화면에서 버튼을 누르면 잘 동작하는 것을 확인할 수 있다.

 

 

styled-components

 이제 CSS 라이브러리를 하나 받아야겠다. React Native에서 styled-components를 써본 적이 없어 한 번 이걸로 해보려고 한다. RN에서 제공하는 컴포넌트는 어떤 컨텐츠를 담고 있는지 이름에서 직관적으로 보이지 않기 때문에 불편함이 많다.

npm install styled-components

 아 아까 전에 말을 안했는데 --save 옵션을 안 넣는 이유는 npm이 버전업되면서 이제 따로 옵션을 안 넣더라도 package.json 디펜던시에 자동으로 라이브러리 버전이 들어가기 때문이다.

 

이제 HomeScreen에서 사용하던 container를 바꿔보겠다.

위에서 아래로 바꾸었고 <View style={{styles.container}}>였던 부분을 <Container >로만 바꿔주면 된다.

 한결 직관적으로 보이게 된다.

 

여기서도 styled 작성 후 자동 import를 할 때 이렇게 styled-components 경로가 뜨는데 이걸 눌러주면 이렇게 작성된다.

 하지만 RN에서는 'styled-components/native' 경로를 써야하기 때문에 일일히 수작업을 해줘야 할 상황인데 이 때 tsconfig.json에 컴파일옵션만 넣어주면 된다.

그럼 'styled-components'로 경로가 설정되었지만 타고 들어가보면 native 디렉터리까지 들어가는 것을 볼 수 있다.

 더해서 VSCode extensions에서vscode-styled-components를 설치하면 자동 완성 기능도 사용할 수 있다.

 

 

react navigation

 화면 전환에 필요한 라이브러리이다. 의존 패키지도 함께 설치해준다.

npm install @react-navigation/native react-native-screens react-native-safe-area-context

이 외에 본인의 탭 스타일에 맞는 라이브러리를 추가로 받아주면 된다. 나는 아래에 있는 게 좋아서 Material Bottom Tabs Navigator를 선택했다.

npm install @react-navigation/material-bottom-tabs react-native-paper react-native-vector-icons

 

 createMaterialBottomTabNavigator()로 Tab을 선언해주고 적용하면 아래에 메뉴가 생성된다. 아이콘 같은 옵션은 공홈에서 찾아보고 넣으면 된다.

 

 이제 마지막으로 navigation을 사용해서 다른 페이지로 이동하는 함수만 알아보겠다. Screen 컴포넌트로 들어간 페이지는 Prop으로 navigation을 가져올 수 있다.

navigation.navigate('이동할 페이지의 이름')을 사용하면 페이지 이동이 가능하다.

스크린 별로 Params관리를 위해 type을 정해주었다. 아직 정해진 값이 없어서 undefined로 넣었다.

네비게이터에 주입해주어 올바르게 스크린 명과 각각의 params 관리를 위해 타입 스크립트를 활용해보자.

 

MyScreen에서 '세팅화면으로 이동하기'를 클릭하면 SettingScreen으로 이동하는 걸 확인할 수 있다.

 

 대충 틀은 갖춰진 것 같다. 필요한 라이브러리는 어떤 앱을 개발하느냐에 따라 종류가 달라지기 때문에 나중에 추가하더라도 현재는 이 정도만 갖추고 시작해도 괜찮을 것 같다.