[React Native] 2-1 나만의 컴포넌트 만들기

[리액트 네이티브를 다루는 기술] 을 공부하며 작성하는 블로그 글입니다.

---

 

프로젝트 디렉터에 components라는 디렉터리(경로)를 만들고 

 

그 안에 Greeting.js파일을 생성 한다.

 

components/Greeting.js

import React from "react";
import {View,Text} from "react-native";

function Greeting() {
  return(
    <View>
      <Text>안녕하세요 함수 컴포넌트!!</Text>
    </View>
  )
}

export default Greeting;

위와 같이 함수형태로 만드는 컴포너느는 함수 컴포넌트라고 부릅니다.

 

함수로 선언한 컴포넌트에서는 이와 같이 XML형태로 이루어진 내용을 반환해줘야 합니다.

 

위 문법은 JSX문법인데 조금 뒤에서 설명할 것 입니다.

 

이후 App 컴포넌트로 불러와서 사용합니다

import React from 'react';
import {SafeAreaView} from 'react-native';
import Greeting from './components/Greeting';

const App = () => {
  return (
    <SafeAreaView>
      <Greeting />
    </SafeAreaView>
  );
};

export default App;

이렇게 생성 되었으면 성공입니다!

---

 

App 컴포넌트는 선언할 때 화살표 함수 문법을 사용했습니다

const App =() => {
	(...)
}

function Greeting(){
	(...)
}

하지만 Greeting 컴포넌트에서는 function 키워드를 사용하여 선언하였습니다.

 

두 방식의 코드 스타일은 다르지만 기능적으로는 큰 차이가 없습니다.

 

화살표 함수 문법의 장점은 복잡한 로직 없이 바로 반환하는 코드라면

 

다음과 같이 중괄호 코드 블록과 return 키워드를 생략할 수 있습니다.

 

const App = () => {
	<SafeAreaView>
    	<Greeting />
    </SafeAreaView>
}

 

하지만 이 책에서는 function 키워드를 사용할 것입니다.