[#2 Component와 메인화면 분할] 환경 구축부터 스토어 출시까지 디데이 앱 따라 만들며 배우는 React Native

리액트 네이티브 튜토리얼

[#1 리액트 네이티브 맛보기]

[#2 Component와 메인화면 분할]

[#3 레이아웃 구성하기]

[#4 레이아웃 구현 마무리하기]

[#5 state]

[#6 설정 Modal 만들기]

[#7 설정 Modal 기능 추가하기]

[#8(구현 끝) 채팅기능 구현하기]

 

저번시간에는 리액트 네이티브가 무엇인지와 간단한 맛보기만 진행했는데,

이번시간에는 본격적으로 주로 사용되는 Component를 이용해서 간단한 메인화면을 구현 해 보겠습니다.

View

UI를 구성할 때 가장 기본이 되는 컴포넌트 입니다.

//App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View>

      </View>
    );
  }
}
const styles = StyleSheet.create({
});

기존의 테스트 코드가 있던 App.js를 위의 코드로 바꿔주세요.

render()함수 안의 return에 <View>가 있는 것을 볼 수 있습니다.

현재 에뮬레이션 되고있는 화면은 흰색 바탕화면만 뜨게되는데 View는 따로 렌더링 하는 화면이 없고, 주로 각각의 요소를 둘러싸는 역할을 합니다.

자 이제 그럼 View를 하나더 추가하면 어떻게 될까요?

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

export default class App extends React.Component {

  render() {
    return (
      <View>

      </View>
      <View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
});

위와같은 형태가 오면 에러가 뜨게됩니다.

그 이유는 return에 무조건 하나의 View만 와야하기 때문입니다.

이를 해결하기 위해서는 View두개를 하나의 View로 감싸면 됩니다.

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

export default class App extends React.Component {

  render() {
    return (
      <View>
        <View>

        </View>
        <View>

        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
});

다시 정상적으로 작동하는 것을 볼 수 있습니다.

Text

이름 그대로 텍스트를 보여주는 컴포넌트 입니다.

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

export default class App extends React.Component {

  render() {
    return (
      <View>
        <View>

        </View>
        <Text>
          Now Loading...
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
});

두번째 View를 Text로 바꿔주고 그 안에 Now Loading...을 넣어보았습니다.

이처럼 Text는 텍스트를 화면에 보여주는 컴포넌트입니다.

Image

Image는 이미지를 띄우고 싶을 때 사용하는 컴포넌트 입니다.

먼저 Image 컴포넌트를 Import해주어야 합니다.

//App.js
import { StyleSheet, Text, View, Image } from 'react-native';

첫 View였던 것을 Image로 바꿔 봅시다.

//App.js
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';

export default class App extends React.Component {

  render() {
    return (
      <View>
        <Image
          style={{width: 50, height: 50}}
          source={{uri: 'https://facebook.github.io/react-native/img/tiny_logo.png'}}
        />
        <Text>
          Now Loading...
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
});

이처럼 위에 리액트 네이티브의 아이콘이 보이게 됩니다.

Image는 View나 Text처럼 <> 사이에 </> 넣는것이 아닌 이미지 태그 하나로 사용이 됩니다.

TextInput

사용자의 입력을 받을 때 사용하는 컴포넌트 입니다.

TextInput도 역시 import 해주어야 합니다.

//App.js
import { StyleSheet, Text, View, Image, TextInput } from 'react-native';

Image와 Text사이에 TextInput을 하나 추가해보겠습니다

import React from 'react';
import { StyleSheet, Text, View, Image, TextInput } from 'react-native';


export default class App extends React.Component {

  render() {
    return (
      <View>
        <Image
          style={{width: 50, height: 50}}
          source={{uri: 'https://facebook.github.io/react-native/img/tiny_logo.png'}}
        />
        <TextInput/>
        <Text>
          Now Loading...
        </Text>

      </View>
    );
  }
}

const styles = StyleSheet.create({
});

배경이 흰색이라 잘 보이진 않지만, 이미자와 텍스트 사이에 공간이 생겼고,
터치하면 키보드가 올라와 입력할 수 있습니다.

StyleSheet

각 컴포넌트에 스타일을 지정할 때 사용합니다.

//App.js
const styles = StyleSheet.create({
    container: {
        backgroundColor: 'gold',
    },
});

위 처럼 contatiner라는 스타일을 하나 정의합니다.

//App.js
<View style={styles.container}>

View에 스타일을 적용하는 방법입니다.

//App.js
import React from 'react';
import { StyleSheet, Text, View, Image, TextInput } from 'react-native';


export default class App extends React.Component {

  render() {
    return (
      <View style={styles.container}>
        <Image
          style={{width: 50, height: 50}}
          source={{uri: 'https://facebook.github.io/react-native/img/tiny_logo.png'}}
        />
        <TextInput/>
        <Text>
          Now Loading...
        </Text>

      </View>
    );
  }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'gold',
  },
});

View의 배경색이 gold로 변경되었습니다.

//App.js
import React from 'react';
import { StyleSheet, Text, View, Image, TextInput } from 'react-native';


export default class App extends React.Component {

  render() {
    return (
      <View style={styles.container}>
        <Image
          style={{width: 50, height: 50}}
          source={{uri: 'https://facebook.github.io/react-native/img/tiny_logo.png'}}
        />
        <TextInput/>
        <Text style={styles.loadingText}>
          Now Loading...
        </Text>

      </View>
    );
  }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'gold',
  },
      loadingText: {
        fontSize: 45,
  },
});

이렇게 Text에도 스타일을 지정할 수 있습니다.

fontSize를 이용해 글씨의 크기를 조절하고, 글씨의 색, 폰트 등등 여러가지를 바꿀 수 있습니다.

어? 근데 잘 보니까 Image태그엔 이미 스타일이 정의되어 있었습니다.

        <Image
          style={{width: 50, height: 50}}  << 이부분
          source={{uri: 'https://facebook.github.io/react-native/img/tiny_logo.png'}}
        />

stylesheet를 생성하지 않고 하나의 컴포넌트에 간단히 스타일을 지정할 때는 {{ }}안에 넣어주면 됩니다.

stylesheet를 사용하는 이유는 여러 컴포넌트에 동일한 스타일을 지정하고 싶을 때 사용할 수 있고,
적용된 스타일의 이름을 통해서 어떤 스타일인지 직관적으로 알 수 있기 때문에 사용합니다.

style={{width: 50, height: 50}}보단 style={{styles.image}}이 좀더 직관적입니다.

메인화면 분할하기

자 이제 본격적으로 메인화면을 구현해 보겠습니다.

만들고자 하는 화면은, 크게 3개의 View로 구분됩니다.

가장 상단의 setting부분과, 중앙의 Dday부분, 하단의 Chat부분으로 나뉘고 이제 각각을 View로 만들어 보겠습니다.

//App.js
import React from 'react';
import { StyleSheet, Text, View, Image, TextInput } from 'react-native';


export default class App extends React.Component {

  render() {
    return (
      <View>
        <View>

        </View>
        <View>

        </View>
        <View>

        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({

});

위와 같이 하나의 View에 Setting, Dday, Chat의 역할을 할 세가지 View를 묶어주었습니다.

이제 스타일을 지정해보겠습니다.

import React from 'react';
import { StyleSheet, Text, View, Image, TextInput } from 'react-native';


export default class App extends React.Component {

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.settingView}>

        </View>
        <View style={styles.ddayView}>

        </View>
        <View style={styles.chatView}>

        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  settingView: {
    flex: 1,
    backgroundColor: 'red',
  },
  ddayView: {
    flex: 1,
    backgroundColor: 'green',
  },
  chatView: {
    flex: 1,
    backgroundColor: 'blue',
  },
});

스타일을 만들어서 각 view에 적용시켜주었습니다.

스타일에 flex라는 속성이 있는데, 이는 화면을 차지하는 비율을 정해주는 역할을 합니다.

현재 가장 상단의 container view는 가장 상위 view이기 때문에 flex:1을 하게 되면, 화면 전체를 채우게 됩니다.

container view에 묶여있는 세가지의 view는 각각 flex:1이 설정되어 있습니다. 따라서 container view의 크기(화면전체)를 각각 1 : 1 : 1의 비율로 차지하게 됩니다.

만약 중간의 ddayView의 flex를 2로 준다면, 1 : 2 : 1 비율을 가지게 되며 이렇게 보여집니다.

우리가 만들고자 하는 화면은 setting : dday : chat이 1 : 6 : 6 입니다.

//App.js
import React from 'react';
import { StyleSheet, Text, View, Image, TextInput } from 'react-native';


export default class App extends React.Component {

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.settingView}>

        </View>
        <View style={styles.ddayView}>

        </View>
        <View style={styles.chatView}>

        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  settingView: {
    flex: 1,
    backgroundColor: 'red',
  },
  ddayView: {
    flex: 6,
    backgroundColor: 'green',
  },
  chatView: {
    flex: 6,
    backgroundColor: 'blue',
  },
});

이제 메인화면이 틀이 잡혔습니다. 다음 글에서는 Text나 TextInput등 컴포넌트들을 추가하고, 각 컴포넌트를 정렬하는 방법을 배워보겠습니다.