[React-Native] #3_리액트 네이티브의 기초

목차

• 기본 문법
• 컴포넌트
• 속성
• 기본적인 코어 컴포넌트

---

1.  기본 문법 (XML)

import React from 'react'; //코드를 자바스크립트로 만들어주는 필수요소
import {SafeAreaView, Text} from 'react-native'; //사용할 코어 컴포넌트

//함수형 컴포넌트
export default function App() {
	return(
    	<SafeAreaView>
        	<Text> Hello RN World! </Text>
        </SafeAreaView>
    )
}

RN은 [JSX = 자바스크립트 + XML(return문 내부 태그가 있는 구문)]이다.
App(함수형 컴포넌트) 내부의 return문을 보면 시작 태그와 끝 태그가 꼭 있어야 한다. (시작 태그에는 속성 값을 표기 가능)

SafeAreaView 컴포넌트 안에 Text 컴포넌트가 존재한다.
따라서 화면에도 SaveAreaView 내부에서 제일 처음에 Text가 등장한다.

App은 함수형 컴포넌트 정의, 선언, export를 동시에 진행했다. export를 빼내면 아래와 같다.
(export : 수출하다 // 다른 파일에서 import 가능 // index.js에서 App을 import 함)

function App() {
   return(
     <SafeAreaView>
       <Text> Hello RN World! </Text>
     </SafeAreaView>
   )
 }

 export default App

---

2. 컴포넌트 (Component)

리액트 네이티브에서 기본적으로 제공하는 코어 컴포넌트가 있고, 사용자가 만든 사용자 컴포넌트가 있다.
위의 코드에서 SafeAreaView나 Text 같은 react-native에서 import해온 컴포넌트들이 코어 컴포넌트이다.
그럼 사용자 컴포넌트에 대해서 공부를 해보자.

사용자 컴포넌트

클래스 컴포넌트와 함수 컴포넌트가 있다. 페이스북에서 함수 컴포넌트 사용을 권장하고 추후 필수 기능인 리액트 훅 기능은 함수 컴포넌트에서만 사용할 수 있어서 함수 컴포넌트만 공부를 하자.

프로젝트 내 src폴더 생성 → src폴더 내 screens 폴더 생성  → screens폴더 내 ArrowComponent.tsx 파일 생성

• ArrowComponent.tsx (함수 컴포넌트) 타입 스크립트를 이용할 거라 타입스크립트를 사용!
  
  function 방식 (속성 값이 없을 때 주로 사용)
  

  // ./src/screens/ArrowComponent.tsx
  import React from 'react';
  import {Text} from 'react-native';
  
  function ArrowComponent() {
    return (
      <Text>함수 컴포넌트</Text>
    )
  }
  
  export default ArrowComponent

  
  화살표 방식 (속성 값이 있을 때 주로 사용)
  

  // ./src/screens/ArrowComponent.tsx
  import React from 'react';
  import {Text} from 'react-native';
  
  const ArrowComponent = () => {
    return (
      <Text> 함수 컴포넌트 </Text>
    )
  }
  
  export default ArrowComponent //외부에서 import가능

  
  타입 스크립트의 함수 컴포넌트
  

  // ./src/screens/ArrowComponent.tsx
  import React from 'react';
  import type {FC} from 'react';
  import {Text} from 'react-native';
  
  //타입스크립트의 함수컴포넌트 형식
  const ArrowComponent: FC = () => {
    return (
      <Text> 내이름은 {myName} </Text>
    )
  }
  
  export default ArrowComponent

  
  
• App.tsx
  

  // ./App.tsx
  import React from 'react'; //코드를 자바스크립트로 만들어주는 필수요소
  import {SafeAreaView, Text} from 'react-native'; //사용할 코어 컴포넌트
  import ArrowComponent from './src/screens/ArrowComponent'; // ArrowComponent.tsx를 import
  
  export default function App() {
  	return(
      	<SafeAreaView>
          	<Text> Hello RN World! </Text>
           	<ArrowComponent/>
          </SafeAreaView>
      )
  }​

• 결과
  SafeAreaView내에 Text 다음 ArrowComponent의 return값이 위치함을 알 수 있다.

---

3. 속성 (Attribute)

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 필요
함수 컴포넌트의 타입 (타입 스크립트가 자바스크립트로 컴파일될 때 필요)

• ArrowComponent.tsx 수정
  

  // ./src/screens/ArrowComponent.tsx
  import React from 'react';
  import type {FC} from 'react'; //함수컴포넌트의 타입 사용
  import {Text} from 'react-native';
  
  //myName이라는 속성의 형식을 명시
  export type NameProps = {
    myName: string
  }
  
  // 속성이 있는 타입스크립트의 함수컴포넌트
  const ArrowComponent: FC<NameProps> = ({myName}) => {
    return (
      <Text> 내이름은 {myName} </Text>
    )
  }
  
  export default ArrowComponent​

• App.tsx 수정
  이제 ArrowComponent에 myName이라는 속성을 보낼 수 있다.
  

  // ./App.tsx
  import React from 'react';
  import {SafeAreaView, Text} from 'react-native';
  import ArrowComponent from './src/screens/ArrowComponent';
  
  const realName = '2HS'; //realName이라는 변수를 문자열로 생성(myName의 형식이 string이다)
  export default function App() {
  	return(
      	<SafeAreaView>
          	<Text> Hello RN World! </Text>
            <ArrowComponent myName={realName} />
        </SafeAreaView>
      )
  }​

   
• 결과

---

4. 기본적인 코어 컴포넌트

리액트 네이티브에서 제공하는 기본 컴포넌트를 살펴보자

View	화면구성의 가장 기본적인 컴포넌트
SafeAreaView	모바일 기기의 안전한구역에 View
ScrollView	스크롤이 있는 View
Text	텍스트 표시
Image	이미지 표시
TextInput	키보드를 통해 텍스트를 앱에 입력하기 위한 기본 구성 요소
Button	버튼 표시
Switch	bool값 표시 (스위치)
TouchableOpacity	버튼을 클릭시, 투명도의 변화를 주어 시각적인 효과를 줄 수 있는 컴포넌트

자세한 내용 (RN 공식 문서) : https://reactnative.dev/docs/components-and-apis#basic-components

Core Components and APIs · React Native