8.2.1 회원 인증을 위한 UI 준비하기

이 화면에 인풋 두 개와 버튼을 보여주겠습니다. 이 과정에서 테두리가 있는 인풋인 BorderInput 컴포넌트와 임의의 스타일을 가진 CustomButton 컴포넌트를 만들겠습니다. 이 UI들을 한 번만 사용한다면 굳이 새로 컴포넌트를 만들 필요가 없겠지만, 재사용할 것이므로 따로 분리해주는 것입니다.

프로젝트의 최상위 디렉터리에 components 디렉터리를 만들고 다음 컴포넌트들을 작성하세요.

components/BorderedInput.js

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

function BorderedInput({hasMarginBottom}) {
  return <TextInput style={[styles.input, hasMarginBottom && styles.margin]} />;
}

const styles = StyleSheet.create({
  input: {
    borderColor: '#bdbdbd',
    borderWidth: 1,
    paddingHorizontal: 16,
    borderRadius: 4,
    height: 48,
    backgroundColor: 'white',
  },
  margin: {
    marginBottom: 16,
  },
});

export default BorderedInput;