ReactNative - Expo 기본 구조

서론

어느정도 React에 대한 감을 잡았으니 이제 ReactNative로 변경해서 작업을 진행해보려고 한다.

ReactNative구조

기본 구조 세팅

일단 기본 설치는 되어 있다는 전제 하에 진행한다. 현재 생성되어 있는 초기 프로젝트의 구조다.

src폴더는 이후에 새로 생성하였다.

일반적인 expo와 달리 js를 사용해서 작업할 것이기 때문에 기본구조가 다른 모습을 볼 수 있다.
그럼 이제 여기에 내가 사용할 기본적인 구성을 먼저 해보겠다. 전체적인 구조는 다음과 같이 잡았다.

직접 개발하는 코드는 전부 src폴더 안에서 관리할 것이기 때문에 src폴더를 만들어서 진행. assets또한 src내부로 이동시켜 주었다. 그리고 page component로 사용할 screen 폴더와 hooks, utils, navigation, services, config폴더를 설정해서 기본 구조를 갖추었다. 나중에 더욱 추가할 예정이다.

현재 설정된 기능은 login시 MainScreen으로 전환, login이 되어 있지 않은 상태라면 TestScreen을 띄우도록 설정하기 위해 Navigation과 AuthContext를 생성하였고 현재는 스타일을 따로 분리하진 않았는데 style뒤에

AuthContext를 사용하여 login 확인

해당사이트를 확인하면 어떻게 AuthContext를 사용해서 로그인 확인을 하고 이동 하는 지 확인 할 수 있다.

참고 자료