컴포넌트와 속성

리액트 네이티브가 제공하는 서비스에는 크게 Text와 같은 코어 컴포넌트와 Platfrom, Alert와 같은 API 두 가지가 있다.

코어 컴포넌트: 화면에 어떤 내용을 렌더링해야 할 때 사용한다.
API: 폰의 하드웨어나 운영체제가 제공하는 기능이 필요할 때 사용한다.
사용자 정의 컴포넌트: 리액트와 같은 프레임워크에서 자신만의 컴포넌트를 만들 수 있고, 코어 컴포넌트를 화면에 렌더링할 때나 사용자의 화면 터치나 텍스트 입력 등을 이벤트 형태로 얻어 적절한 내용을 코어 컴포넌트에 알려 화면에 반영하는 일도 수행한다.

<Person name="Jack" age={22} />

<Person person={{name:"Jack",age:32}} />

부모 컴포넌트가 자식 컴포넌트 쪽으로 데이터를 전달하고 싶을 때 사용한다.

const person = D.createRandomPerson()

export default function App() {
	return <ArrowComponent person={person} />
}

[ 콜백함수 형태 ]

콜백함수 = () => {/* 함수 몸통*/}

import {Alert} from 'react-native'

static alert(타이틀, 메시지)

Button이 가지는 문제점이 디자인에 융통성이 없다는 것인데, 이 때문에 RN은 접두어 'Touchable~'이 붙는 다음 두 가지 코어 컴포넌트를 제공한다.

import {TouchableOpacity, TouchableHighlight} from 'react-native'

이 두 컴포넌트의 특징은 다음 2가지로 요약할 수 있다.
1. 컴포넌트 영역에 터치가 일어나면 onPress 속성에 설정된 이벤트 핸들러 콜백함수를 호출한다.
2. 단 한개의 자식 컴포넌트만 올 수 있다.
이 두 컴포넌트는 터치가 일어났을 때 화면의 시각 효과만 다를 뿐 동작은 같다.
- TouchableOpacity: 터치가 일어나면 컴포넌트 바탕색의 투명도를 바꾼다.
- TouchableHighlight:

Text 컴포넌트도 onPress 이벤트 속성을 제공하며 Button이나 터처블 컴포넌트처럼 텍스트를 터치하면 onPress에 설정된 이벤트 처리기를 호출한다.
다만 터치했을 때 시각적 효과가 전혀 없다는 것이 Button이나 터처블 컴포넌트와 차이이다.

import {TextInput} from 'react-native'

onChangeText(text: string) => void

텍스트를 입력할 수 있는 상태(포커스 O)가 되면 onFocus 이벤트를 호출하고, 텍스트를 입력할 수 없는 상태(포커스 X)가 되면 onBlur 이벤트를 호출한다.
defaultValue 속성에 초깃값을 설정할 수 있고, placholder 속성을 사용하여 어떤 값을 설정해야 하는지 문자열로 출력할 수 있다.
입력된 데이터는 value 속성값으로 얻을 수 있다.

티스토리툴바