React Native Component 기본 정리

리액트 네이티브의 Component란 쉽게 이야기 하면 화면을 구성하는 객체입니다.

 

아래의 코드를 같이 볼까요?

return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );

이 코드는 리액트 네이티브 프로젝트를 생성하면 만들어지는 기본 코드입니다. 이 경우에는 view, text, statusbar로 총 3가지 종류의 컴포넌트로 구성되어있습니다. 그래서 실행하면 아래와 같이 나옵니다.

 

컴포넌트는 기본적으로 맨 윗줄에 사용할 컴포넌트를 선언해줍니다.

 

만약에 이 화면에 버튼을 추가하고 싶다면 아래와 같이 리액트 네이티브의 내장 컴포넌트인 Button을 사용하면 됩니다.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button } from 'react-native';

export default function App() {
  //버튼 클릭하면 알림창 띄우기
  const handleButtonPress = (text) => {
    alert(text + ' Button pressed!');
  };

  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <View style={styles.row}>
        <Button title="확인" style={styles.button} onPress={() => handleButtonPress("확인")}/>
        <Button title="취소" style={styles.button} onPress={() => handleButtonPress("취소")}/>
      </View>
      <StatusBar style="auto" />
    </View>
  );
}

//스타일 관련
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  row: {
    alignItems: 'center',
    justifyContent: 'space-around',
    flexDirection: 'row',
    width:'30%',
    marginTop: 10,
  },
  button: {
    backgroundColor: '#2196F3',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 5,
    alignItems: 'center',
  },
});

이렇게 확인과 취소 두 개의 버튼을 만들고 각각 클릭하면 알림창이 뜨게 코드를 수정했습니다.

Tip. Button 컴포넌트 property - title : 버튼 안에 들어갈 텍스트 - style : 해당 버튼에 사용할 스타일 - onpress : 클릭 시 실행할 함수(여기서는 handleButtonPress 사용)

해당 코드를 실행하면 이렇게 됩니다.

 

위의 코드를 보면 두 개의 버튼은 텍스트 빼고는 공통으로 사용하는 부분이 많습니다. 

만약에 동일한 모양의 비슷한 기능을 하는 버튼이 한 화면뿐만이 아니라 여러 곳에서 사용된다고 가정할 때, 일일히 저렇게 쓰면 불편한 점이 많이 있습니다.

첫번째로 코드가 매우 지저분해지겠죠?

두번째로는 버튼의 스타일을 변경할 때 모든 곳의 스타일을 개발자가 전부 변경해야하는 유지보수 측면에서 불편함이 생길 겁니다.

그러니 이럴 경우에는 리액트 네이티브의 내장 컴포넌트를 사용했던 것처럼 사용자가 직접 컴포넌트를 만들고 그걸 가져와서 사용하면 재사용, 유지보수 측면에서 매우 편리합니다.

 

이제 위의 Button의 코드를 분리해보겠습니다.

 

먼저 Component라고 폴더를 생성해줍니다.(필수는 아니지만 한 곳에 코드가 뭉쳐있으면 나중에 찾기 어려우므로 폴더를 만들어줍니다.)

안에 Component 폴더 안에 MyButton라는 이름의 js 파일을 생성합니다.

빈 MyButton.js 상단에 먼저 사용할 컴포넌트들을 선언해줍니다.

//버튼의 style을 지정하기 위한 StyleSheet, 그리고 Button을 사용할 것이기 때문에 Button을 가져옵니다.
import React from 'react';
import { StyleSheet, Button } from 'react-native';

사용할 컴포넌트를 선언해줬으면 아래에 기본적인 틀을 만들어줍니다.

import React from 'react';
import { StyleSheet, Button } from 'react-native';

//꼭! export default 함수의 이름은 대문자로 시작해야 에러가 발생하지 않습니다.
function MyButton () {
  return (
    <Button/>
  );
};

//button에 사용할 스타일 선언
const styles = StyleSheet.create({
});

export default MyButton;

여기서 주의할 점은 기본으로 선언되는 함수의 명은 대문자로 시작해야합니다. 소문자로 시작하면 에러가 발생합니다.

 

그 다음에는 스타일을 지정해줍니다. 아까 코드의 있는 button 스타일을 가져와서 StyleSheet 안에 붙여넣습니다. 그리고 Button 변수에 style을 사용해줍니다.

function MyButton () {
//StyleSheet를 이용하여 사용할 때는 style={StyleSheet 변수명.사용할 스타일명} 이렇게 사용합니다.
  return (
    <Button style={styles.button}/>
  );
};

const styles = StyleSheet.create({  
  button: {
    backgroundColor: '#2196F3',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 5,
    alignItems: 'center',
  },
});

이제 Button을 구성할 요소들을 넣어줍니다. 아까 사용했던 코드를 참고해서 title, onpress, style을 추가하겠습니다.

여기서 title(텍스트)와 onPress(클릭 시 실행될 함수)는 버튼마다 기능이 달라야하기 때문에 이건 props(변수)로 받아오겠습니다. 다른 js에서 MyButton을 불러올 때 props를 받아오는 방법은 자바스크립트 함수를 호출하는 것처럼 변수를 받는 곳에 {}로 감싸 이름을 받아오는 겁니다. 그리고 해당 변수를 사용할 때는 {}로 감싸서 사용해주시면 됩니다.

//function 함수이름({변수1, 변수2, ...}) 이렇게 받아올 수 있습니다.
function MyButton ({ title, onPress }) {
  //사용할 때는 {사용할 변수명} 이렇게 사용 가능합니다. 
  return (
    <Button style={styles.button} title={title} onPress={onPress}/>
  );
};

이렇게 만들면 MyButton 컴포넌트를 만들었습니다. 이번에는 MyButton 버튼을 사용해보겠습니다.

 

App.js에서 MyButton 호출을 위해서 먼저 상단에 MyButton을 import 해줍니다.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button } from 'react-native';
//import로 MyButton 추가
import MyButton from './Component/MyButton';

MyButton이 클릭하면 실행될 함수를 선언합니다. 

export default function App() {
  //버튼 클릭하면 알림창 띄우기
  const handleButtonPress = (text) => {
    alert(text + ' Button pressed!');
  };

  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

return 안에 MyButton을 선언해줍니다. 여기서 아까 MyButton에서 props로 받기로 한 title과 onPress에 값을 넣어줍니다. title은 해당 버튼에 나올 글자를 적어주면 되고, onPress는 아까 클릭 시 실행될 함수를 넣어줍니다. 저는 버튼 클릭하는 것 구분을 위해서 handleButtonPress에 변수를 넣어서 알림창으로 글자가 나오도록 하였습니다.

export default function App() {
  //버튼 클릭하면 알림창 띄우기
  const handleButtonPress = (text) => {
    alert(text + ' Button pressed!');
  };

//아까 변수로 넘겨줘야하는 title과 onPress에 값 넣기
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <View style={styles.row}>
        <MyButton title="확인" onPress={() => handleButtonPress("확인")} />
        <MyButton title="취소" onPress={() => handleButtonPress("취소")} />
      </View>
      <StatusBar style="auto" />
    </View>
  );
}

//row는 버튼을 예쁘게 정리하기 위해서 추가한 스타일
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  row: {
    alignItems: 'center',
    justifyContent: 'space-around',
    flexDirection: 'row',
    width:'30%',
    marginTop: 10,
  },
});

(저는 버튼이 위아래로 가기 때문에 view를 선언하고 스타일을 줘서 예쁘게 버튼이 좌우로 나오게 추가했습니다.)

 

실행해보면 잘 나오는 것을 확인할 수 있습니다.

 

정리

App.js 전체 코드

import { StatusBar } from 'expo-status-bar';

import { StyleSheet, Text, View, Button } from 'react-native';

import MyButton from './Component/MyButton';

 

export default function App() {

  const handleButtonPress = (text) => {

    alert(text + ' Button pressed!');

  };

 

  return (

    <View style={styles.container}>

      <Text>Open up App.js to start working on your app!</Text>

      <View style={styles.row}>

        <MyButton title="확인" onPress={() => handleButtonPress("확인")} />

        <MyButton title="취소" onPress={() => handleButtonPress("취소")} />

      </View>

      <StatusBar style="auto" />

    </View>

  );

}

 

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    justifyContent: 'center',

  },

  row: {

    alignItems: 'center',

    justifyContent: 'space-around',

    flexDirection: 'row',

    width:'30%',

    marginTop: 10,

  },

});

MyButton.js 전체 코드

import React from 'react';

import { StyleSheet, Button } from 'react-native';

 

function MyButton ({ title, onPress }) {

  return (

    <Button title={title} style={styles.button} onPress={onPress}/>

  );

};

 

const styles = StyleSheet.create({  

  button: {

    backgroundColor: '#2196F3',

    paddingVertical: 10,

    paddingHorizontal: 20,

    borderRadius: 5,

    alignItems: 'center',

  },

});

 

export default MyButton;