[React Native] Button(using Hook), View

Button

App.js 파일을 수정해서 버튼을 추가한다.

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

export default function App() {
  const[outputText, setOutputText] = useState('Open App!')
  return (
    <View style={styles.container}>
      <Text>{outputText}</Text>
      <Button title ="Change Text" onPress={()=>setOutputText('The text changed')} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

react-native import에 Button 이 추가되고 App() 함수 안에 <Button>이 추가된 것을 확인할 수 있다.

이 코드는 button 을 눌렀을 경우 text의 내용이 onPress함수의 setOutputText가 오버라이드 되어 'The text changed'로 바뀌는 함수이다.

 

리엑트 네이티브는 맞는 컴포넌트에 맞는 값을 넣는것이 중요하다. 따라서 Text값은 Text에 넣는 등에 주의한다.

 

위는 Hook를 사용한 것이다. Hooks은 Class없이 React 기능들을 사용하는 방법을 알려줍니다. 아래 링크는 Hook에 대해서 설명한 것이다. 위의 코드의 내용에서는 useState 값으로 초기 outputText값을 입력받는다. (여기에서는 'Open App!')

<Text>는 outputText의 내용 값을 출력하게된다. 그리고 Button 클릭시 실행되는 onPress함수가 값을 오버라이드해서 함수안의 내용으로 변경하고 출력되는 Text의 내용이 달라지게 된다.

https://ko.reactjs.org/docs/hooks-overview.html

Hook 개요 – React

 

View

리엑트 네이티브에서 뷰는 <View>테그로 선언된다 View 태그안에 여러개의 View 태그를 넣을 수 있고 이렇게 뷰를 묶는등의 구조를 통해서 레이아웃을 하게된다.

 

https://facebook.github.io/react-native/docs/components-and-apis

React Native · A framework for building native apps using React

위의 사이트에서 Text나 View등 다양한 리엑트 네이티브에서 사용하는 컴포넌트, 인터페이스들 등을 확인할 수 있다.