[React Native] 프로젝트 생성 & JSX 구문 사용
참고한 교재는 Do it 리액트 네이티브 앱 프로그래밍 입니다!
리액트 네이티브 프로젝트 만들기
타입스크립트로 개발하는 경우 --template 옵션에 react-native-template-typescript을 지정합니다.
npx react-native init 프로젝트명 --template react-native-template-typescript
code 프로젝트명 // vscode 폴더 열기
물리DOM과 가상DOM
리액트 프레임워크는 물리 DOM 구조와 가상 DOM 구조를 사용합니다.
- 물리 DOM 구조
웹 브라우저에서 자바스크립트 코드가 생성하는 실제 DOM 구조
const elem = document.createElement('p');
elem.innerText = '리액트 네이티브 공부해요';
- 가상 DOM 구조
리액트 코드가 생성한 자바스크립트 객체 구조.
const textElement = React.createElement(Text, null, '리액트 네이티브 공부해요');
- 랜더러
- 리액트는 특정시점에서 가상 DOM 구조를 물리 DOM 구조로 만드는데, 이 기능을 수행하는 패키지를 '렌더러' 라고 함.
- 네이티브 렌더러는 리액트 패키지가 만든 가상 DOM 구조를 안드로이드/아이폰 화면 UI 객체로 바꿔주는 역할을 함.
JSX 구문
- JSX? 자바스크립트와 XML 구문을 결합해 사용하는 코드
- JSX 구문이 있는 타입스크립트 코드는 확장자 .tsx 사용 / import문 필요
import React from "react";
import { SafeAreaView, Text } from "react-native";
export default function App() {
return (
<SafeAreaView>
<Text>Hello JSX</Text>
</SafeAreaView>
)
}
👉 JSX의 부모 요소와 자식 요소
- JSX 구문은 XML 구문을 따르므로 컴포넌트 간 부모/자식 관계를 표현
- 부모 컴포넌트 : <SafeAreaView>
- 자식 컴포넌트 : <Text>
👉 중괄호를 사용하여 변수 표현
const txt = "Hello RN!";
return (
<SafeAreaView>
<Text>{txt}</Text>
</SafeAreaView>
)
👉 JSX문 자체를 변수에 담기
export default function App() {
const virtualDom = <SafeAreaView><Text>Hello, Rn!</Text></SafeAreaView>
return virtualDom
}
// 또는 바로 리턴
export default function App() {
return <SafeAreaView><Text>Hello, Rn!</Text></SafeAreaView>
}
👉 if 문을 사용한 JSX (1)
export default function App() {
const isTrue = true
if (isTrue) {
return (
<SafeAreaView><Text>True 입니다</Text></SafeAreaView>
)
}
return <SafeAreaView><Text>Hello, RN!</Text></SafeAreaView>
}
👉 if 문을 사용한 JSX (2) - 단축평가
export default function App() {
const isTrue = true
return (
<SafeAreaView>
{ isTrue && <Text>True 입니다</Text> }
{ !isTrue && <Text>Hello, RN!</Text> }
</SafeAreaView>
)
}
👉 if 문을 사용한 JSX (3) - 삼항연산자 사용
export default function App() {
const isTrue = true
const children = isTrue? <Text>True 입니다</Text> : <Text>Hello, RN!</Text>
return children
}
👉 배열 (1)
- 배열 변수에 담긴 JSX문은 반드시 부모 컴포넌트의 자식형태로 만들어야 함.
- XML 작성원칙을 준수하여 반드시 여러개의 컴포넌트를 배열로 담은 변수는 부모요소로 감쌀 것!
export default function App() {
const children = [
<Text>텍스트 1 입니다</Text>,
<Text>텍스트 2 입니다</Text>,
<Text>텍스트 3 입니다</Text>
]
return <SafeAreaView>{children}</SafeAreaView>
}
👉 배열 (2)
- Array 클래스가 제공하는 map을 사용하여 내용이 다른 컴포넌트 배열 만들기
export default function App() {
const children = [1,2,3].map((i)=> <Text>Hello, RN {i}</Text>)
return <SafeAreaView>{children}</SafeAreaView>
}
JSX 속성
- JSX의 모든 속성은 따옴표로 감싸야 한다
- 속성 타입이 number 인 경우는 중괄호 {} 로 감싸야 한다
<Person name="Jack" age={22} />
- 속성이 객체인 경우, 객체를 중괄호 {} 로 감싸야 한다
<Person person={{name: 'Jack', age: 22}} />
이벤트 속성
- 컴포넌트의 속성 중 onPress, onChangeText처럼 이름에 접두사로 on이 붙는 속성을 뜻함.
- 이벤트 속성에는 반드시 콜백함수를 설정해야 하며, 이를 이벤트 콜백함수 또는 이벤트 처리기라고 함.
export default function App() {
const button = <Button title="home" onPress={() => Alert.alert('home pressed')} />
return <SafeAreaView>{button}</SafeAreaView>
}
- Button 컴포넌트를 생성하여 onPress 속성을 지정
- Alert API를 사용하여 버튼 클릭시 대화상자 호출
