7-1 프로젝트 구조
1. index.js
프로젝트를 실행할 때 가장 먼저 실행되는 기점이다.
App.js를 가져와서 컴포넌트로 등록한다.
2. app.js
실제 디바이스에 표시되는 코드가 App.js에 작성되어 있다.
3. android/
안드로이드 네이티브 모듈을 담당하고 있는 부분이다.
react-native에서 지원하지 않는 기능들을 사용하기 위해서는 네이티브 모듈을 직접 구현해야 한다.
4. ios/
ios 네이티브 모듈을 담당하고 있는 부분이다.
react-native에서 지원하지 않는 기능들을 사용하기위해서는 네이티브모듈을 직접 구현해야 한다.
5. node_modules/
react-native 프로젝트와 관련된 모듈이다.
npm을 통해 설치한 모듈들이 이곳에 위치한다.
모듈을 찾지 못하는 에러가 발생하면 여기에 모듈이 있는지를 제일 먼저 확인한다.
6. package.json
프로젝트와 관련된 모듈들이 기록된 파일이다.
모듈들의 버전관리를 맡는다.
7-2 App.js
App.js는 기본적으로 4가지로 구성되어 있다. 모듈을 가져와서 어떤 컴포넌트를 사용하는지 선언하는 import문과 뼈대를 구성하는 body문 그리고 body문을 어떻게 꾸밀껀지를 정의해 놓은 styles로 구성이 되어있다. 마지막으로 export함수를 통해 해당 body문을 내보내는 것이 있다. 프로젝트를 처음으로 생성하면 만들어지는 app.js문을 한번 확인해보자!
import
여기서는 react와 react-native와 react-native/Libraries/NewAppScreen라는 모듈에서 원하는 컴포넌트를 선언해서 해당 파일에서 사용이 가능하도록 만들어준다.
react 모듈에서는 react 컴포넌트나 Hook 컴포넌트를 가져올 수 있다.
//component를 가져올경우
import React, {Component} from 'react';
//가져오지 않았을때
React.Component
react-native/Libraries/NewAppScreen은 생소할 수 있는데 시작화면에 대한 컴포넌트가 모아진 모듈이다.
이것은 개발에는 거의 사용하지 않기 때문에 넘어가도 괜찮다.
app(body)
여기가 화면을 담당하는 뼈대 부분이다. return함수 안에 있는 컴포넌트들을 화면으로 반환을 한다.
전반적인 형태를 보면 제일 위에 StatusBar가 위치해 있다. 여기는 상단에 있는 상태 바를 숨기거나, 색깔을 변경하는데 사용된다. 그리고 그다음에 SafeAreaView가 화면을 감싸고 있고 ScrollView가 있다. SafeAreaView는 말그대로 안전한 뷰영역인데 이것을 지정하면 이 안에 있는 컴포넌트들이 네비게이션 영역이나 Tab bar 영역, StatusBar영역을 침범하지 못하게 막아준다.
—styles
app을 구현한 코드를 보면 각각의 컴포넌트 안에 style이란 속성이 있고 그안에 styles.OOO 이런 값들이 지정되어 있는 것을 알 수 있다. 이것은 컴포넌트를 어떻게 꾸며줄지를 지정하는 것인데 어떤 것은 중복으로 사용할 수도있고 어떤 것은 꾸미는 속성 종류가 엄청 많을 수도 있다. 그래서 StyleSheet이라는 것을 통해 미리 스타일을 지정해주고 사용하는 것인데 이렇게 하게된다면 코드의 가독성도 좋고 재사용성이 향상되어 더 깔끔하고 편한 코딩을 할 수 있다.
7-3 Hello World
마지막으로 코드를 다 지우고 hello world를 출력해보자!
import React from 'react';
import {Text, View, StyleSheet} from 'react-native';
const HelloWorldApp = () => {
return (
<View style = {styles.container}>
<Text>Hello World!</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex : 1,
justifyContent: 'center',
alignItems: 'center',
}
});
export default HelloWorldApp;
—출력화면
7-4 마치며...
오늘은 프로젝트가 전반적으로 어떻게 구성되어있고 어떤식으로 돌아가는지를 알아보았다.
다음 포스팅에서는 StyleSheet에 대해 알아볼 예정이다. StyleSheet을 먼저 공부해야지 나중에 뼈대를 공부하기가 더욱 수월할 꺼 같아서 StyleSheet 컴포넌트를 공부를 하고 다른 컴포넌트를 진행할 예정이다.
Uploaded by Notion2Tistory v1.1.0