React-Native 특징

코어 컴포넌트 :

화면에 렌더링 하는 (<Text>, <Image> ..)

 

API:  

하드웨어 운영체제가 제공하는 기능 (platform, Alert)

 

속성:

프로그래밍 용어에서는 클래스의 멤버 변수를 의미한다. 
컴포넌트도 화면 UI를 담당하는 클래스이므로 속성을 가진다.

- 가변 mutable : 수시로 값이 바뀜

- 불변 immutable: 바뀌지 않음

따라서 리액트 네이티브는 값이 바뀌면 즉시 재렌더링을 해야한다. 

즉 리액트 네이티브가 말하는 속성은  = 클래스속성 + 재렌더링 이다. 

 

JSX 속성 설정

// string 타입 속성값 지정
<Text name='ych' /> 

// number 타입 속성값 지정
<Text age={22} />

// 객체 일때
<Text person={{name:'ych', age: 22}} />

// 부모 데이터를 자식에게 전달시

const person = {name:'ych', age: 22}

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

 

커스텀 컴포넌트 속성

 // P는 Property 첫글자로 타입변수
 // FunctionComponent<P>는 함수 컴포넌트 타입 -> 좀더 간결한 FC 사용
 // ComponentClass<P>는 클래스 컴포넌트 타입 
 
function createElement<P extends {}>(
        type: FunctionComponent<P> | ComponentClass<P> | string, // 제네릭 타입
        props?: Attributes & P | null,
        ...children: ReactNode[]): ReactElement<P>;

 

타입은 타입스크립트가 자바스크립트로 컴파일시 필요한 정보로 
컴파일 된후에는 자바스크립트에서 완전히 사라진다. 

이와 달리 클래스는 물리적 동작하는 메서드와 속성을 가지므로
컴파일된 형태 그대로 남는다.

그래서 FC는 import type 구문을 사용한다.

 

import React from 'react'
import type {FC} from 'react'
import * as D from '../data'

export type PersonProps = {
	person: D.IPerson
}

const Person: FC<PersonProps> = ({person}) => {
	return <Text>{JSON.stringify(perosn, null , 2)}<Text/>
}

export default Person

 

key 속성

리액트 프레임워크가 컴포넌트의 렌더링 속도를 최적화 하는 데 필요한 속성