Dahna React Native Basics
npm install : 프로젝트에 필요한 의존성 설치
index.tsx패턴과 App.js패턴 차이
-
진입점(Entry Point) 및 라우팅 방식:
App.js 패턴:
기존의 리액트 네이티브 앱에서는 App.js가 기본 진입점(entry point)으로 사용되었습니다. 이 파일에서 앱의 모든 주요 컴포넌트를 로드하고 네비게이션을 설정합니다.
개발자는 React Navigation과 같은 라이브러리를 사용해 별도의 네비게이터(navigator)를 설정하고 라우트를 관리했습니다.
index.tsx 패턴:
Expo Router를 사용하는 경우, index.tsx는 특정 디렉토리 내에서 라우팅과 레이아웃을 자동으로 관리하는 데 사용됩니다.
디렉토리 구조가 라우팅을 자동으로 관리해 주므로, 개발자는 라우팅을 수동으로 설정할 필요가 없습니다. 예를 들어, pages/Home.tsx 파일이 있으면 /home 라우트로 자동 매핑됩니다.
index.tsx 파일은 해당 디렉토리 내의 모든 페이지에 공통적으로 적용되는 레이아웃을 정의합니다. -
레이아웃 관리:
App.js 패턴:
App.js에서 전체 앱의 루트 컴포넌트를 정의하고, 모든 페이지와 네비게이션을 직접 관리해야 합니다. 글로벌 레이아웃(헤더, 푸터 등)을 수동으로 설정하고 유지해야 합니다.
index.tsx 패턴:
index.tsx 파일은 해당 디렉토리 내의 모든 페이지에 일관된 레이아웃을 제공하는 역할을 합니다.
예를 들어, index.tsx에서 공통적으로 사용할 헤더나 네비게이션 바를 정의하면, 해당 디렉토리 내의 모든 페이지에 자동으로 적용됩니다.
핵심 컴포넌트 & 컴포넌트 스타일링
- Text와 View는 React Native의 가장 중요한 내장 컴포넌트
- div나 h2 태그는 DOM을 통해 사용할 수 있는 HTML요소라서 사용할 수 없음
- 브라우저가 아니기 때문에 CSS가 없음 -> 대신 스타일을 적용함
- 인라인 스타일을 적용하거나 StyleSheet객체를 사용함
- View안에는 div처럼 그냥 텍스트를 넣을 수 없음 -> Text로 감싸줘야 함
- React Native에서는 View가 컴포넌트를 담는 유일한 컨테이너 컴포넌트임
- 사용할 HTML요소를 import 해줘야 함
앱 스타일링하기
- 인라인 스타일을 추가해서 스타일 객체를 프로퍼티로 전달하거나
- 별도의 객체를 정의해서 프로퍼티로 전달
style: 모든 요소에 지원되는 것이 아니라 View, Text 같은 일부에서만 지원됨- 보통은 StyleSheet 객체를 사용함
Layouts & Flexbox
- Flexbox : React Native에서 페이지 콘텐츠를 조직 및 구성할 때 핵심 도구
- 주축은 flexDirection을 따름
- flexDirection이 row라면 주축은 왼쪽에서 오른쪽, column이면 위에서 아래
- justifyContent를 사용해 주축을 따라 정렬
- alignItems를 사용해 교차축을 따라 요소를 정렬
- 구체적인 설정은 자식요소에서
이벤트 처리
- 이벤트 리스너를 추가해서 이벤트 함수에 연결하고 useState 훅을 사용해 컴포넌트에서 상태를 관리
- onChangeText프로퍼티 : React Native에서 활용하는 프로퍼티로 함수를 값으로 취하고 함수를 지목하는 역할. 괄호는 추가하면 안됨
- React Native에서는 버튼에 해당 프로퍼티가 없음. 대신 비슷한 onPress
강의 목표 리스트 관리하기
function addGoalHandler() {
setCourseGoals((currentCourseGoals: string[]) => [
...currentCourseGoals,
enteredGoalText,
]);
}
... : 전개 연산자(spread operator)
배열이나 객체의 요소들을 개별적으로 펼쳐서 사용할 수 있게 해주는 기능
<View style={styles.goalsContainer}>
{courseGoals.map((goal) => <Text key={goal}>{goal}</Text>)}
</View> : 목록의 일부로 출력되는 개별 항목에는 항상 key프로퍼티를 추가해야 함
Setup