로그인 화면

 

 

components/Login (파일 이름은소문자 가능)

(컴포넌트 이름은 첫글자 대문자)

 

 

import React, { useState } from 'react';

import { View, TextInput, TouchableOpacity, Text, StyleSheet, Dimensions } from 'react-native';

const LoginScreen = () => { // 컴포넌트 생성 

const [username, setUsername] = useState(''); 

const [password, setPassword] = useState('');

const handleLogin = () => {

// 로그인 버튼이 클릭되었을 때 처리할 로직을 작성하세요.

// 여기서는 간단히 입력된 아이디와 비밀번호를 출력하는 예시를 보여드립니다.

console.log('Username:', username);

console.log('Password:', password);

// 로그인 처리 로직을 추가하세요.

};

return (

<View style={styles.container}>   // 화면에 보여지는 컨테이너 역할을 하는 컴포넌트 . 다른 컴포넌트들을 감싸고 정렬 가능

<Text style={styles.loginText}>로그인</Text> //텍스트를 표시하는 컴포넌트 , 문자열을 화면에 표시할 때 사용

<TextInput         // 사용자에게 텍스트를 입력받을 수 있는 컴포넌트

placeholder="아이디"  // 빈칸에 텍스트 입력 설명 작성할 수 있음

secureTextEntry={false} // 보안( 비밀번호 칠 때 안보이도록 입력 키 안보이도록 하는거)

value={username}   // 변수 username의 값을 value에 할당 

//value: 사용자가 입력 필드에 값을 입력하면 상태 변수가(username)이 업데이트되고, 해당 값이 입력 필드에 표시

onChangeText={setUsername} 

//onChangeText : 입력 필드의 값이 변경 될때마다 해당 함수 호출 / 위는 setUsername함수가 호출되어 username 상태 변수 업데이트

style={styles.input}  //StyeSheet 컴포넌트 이용하여 한 파일 내에서 스타일 적용

/>

<TextInput

placeholder="비밀번호"

secureTextEntry   //기본값 true

value={password}

onChangeText={setPassword}

style={styles.input}

/>

<TouchableOpacity style={styles.button} onPress={handleLogin}> 

//사용자가 클릭시 투명도 변화, onpress 호출 / onpress: 버튼 클릭시 실행되는 함수 넣음

<Text style={styles.buttonText}>로그인</Text>

</TouchableOpacity>

</View>

);

};

const windowWidth = Dimensions.get('window').width;  //현재 화면의 너비 가져옴 / 'window'는 현재 창의 크기를 말함 

const windowHeight = Dimensions.get('window').height; //현재 화면의 높이 가져옴

//화면의 높이와 너비를 가져오기 위해 dimension api 가져옴( 라이브러리 설치 필요 없음)

const styles = StyleSheet.create({

container: {

position: 'absolute',

flex: 1,  //flexbox 사용되는 속성, 컴포넌트의 크기를 유연하게 조정/ flex:1은 화면이 남는 공간을 모두 차지하도록 설정

// 만약 다른 컴포넌트들도 flex:1이라고 설정 되었으면 동일한 크기로 분배됨 

justifyContent: 'center',

alignItems: 'center',

width: windowWidth,  //컨테이너이 너비가 화면과 동일하도록 설정 

height: windowHeight,

},

loginText: {

fontSize: 20,

marginBottom: 20,

},

input: {

width: '80%',

height: 40,

borderWidth: 1,

borderColor: 'gray',

marginBottom: 10,

paddingHorizontal: 10,

},

button: {

width: '80%',

height: 40,

backgroundColor: 'blue',

justifyContent: 'center',

alignItems: 'center',

borderRadius: 8,

},

buttonText: {

color: 'white',

fontSize: 16,

},

});

export default LoginScreen;

 

 

{표현식} : 중괄호 사용하여 js표현식 감싸는 역할 

 

1) TexInput의 속성들

1. value: 입력 필드의 현재 값으로 설정됩니다. 이 값을 통해 초기값을 설정하거나, 사용자의 입력에 따라 동적으로 업데이트할 수 있습니다.
2. onChangeText: 입력 필드의 값이 변경될 때 호출되는 콜백 함수를 설정합니다. 사용자가 입력 필드를 편집할 때마다 해당 함수가 호출되어 입력값의 변경을 감지하고, 필요한 작업을 수행할 수 있습니다.
3. placeholder: 입력 필드에 표시되는 힌트 텍스트를 설정합니다. 사용자에게 입력 예시나 설명을 제공할 때 사용됩니다.
4. secureTextEntry: 입력 필드의 내용을 보안 목적으로 숨기는 옵션입니다. 주로 비밀번호 입력 등에 사용됩니다.
5. keyboardType: 키보드의 종류를 설정합니다. 예를 들어, 숫자만 입력받을 수 있는 숫자 키패드, 이메일 주소 입력을 위한 이메일 키패드 등을 설정할 수 있습니다.
6. autoCapitalize: 자동 대문자 변환 옵션을 설정합니다. none, sentences, words, characters 등의 값을 가질 수 있으며, 입력된 텍스트를 자동으로 대문자로 변환할 수 있습니다.
7. autoCorrect: 자동 수정 기능을 활성화 또는 비활성화하는 옵션입니다. 사용자의 입력을 기반으로 오타를 자동으로 수정할지 여부를 설정할 수 있습니다.
8. multiline: 여러 줄의 텍스트 입력을 허용하는지 여부를 설정합니다. true로 설정하면 여러 줄의 텍스트를 입력할 수 있습니다.
9. editable: 입력 필드를 편집 가능하게 할지 여부를 설정합니다. false로 설정하면 사용자가 입력 필드를 편집할 수 없습니다.
10. onSubmitEditing: 키보드의 "완료" 또는 "다음" 버튼을 눌렀을 때 호출되는 콜백 함수를 설정합니다.

 

2)Button

: 간단하게 버튼 생성시 쓰는 컴포넌트

*단 커스터마이징을 못함

 

따라서...위 코드에서는 Text 컴포넌트 이용해서 버튼 생성

 

TouchableOpacity: 사용자가 버튼 클릭시 투명도가 변경되는 효과, 사용자가 해당영역 클릭시 onpress 적용됨 

 

 

3) StyleSheet

사용법) 

1) StyleSheet.create 메서드 사용하여 객체 생성

 

const styles = StyleSheet.create({

 

2) 컴포넌트에 적용

 

style={styles.button} 

4)반응형 처리

1. Flexbox 사용: Flexbox는 React Native에서 레이아웃을 유연하게 처리하기 위한 기능입니다. flex 속성과 flexDirection, justifyContent, alignItems 등의 속성을 사용하여 컴포넌트의 크기와 위치를 조정할 수 있습니다. 이를 활용하여 화면의 크기에 따라 컴포넌트의 배치와 크기를 조정할 수 있습니다.
2. Dimensions API 사용: 앞서 설명한 것처럼 Dimensions API를 사용하여 화면의 너비와 높이를 가져올 수 있습니다. 이를 활용하여 컴포넌트의 크기나 위치를 동적으로 조정할 수 있습니다. 화면의 크기가 변경될 때마다 해당 값을 가져와서 레이아웃을 업데이트할 수 있습니다.
3. Dimension 유틸리티 함수 사용: react-native-responsive-dimensions와 같은 라이브러리를 사용하여 반응형 디자인을 처리할 수도 있습니다. 이러한 라이브러리를 사용하면 화면의 크기에 따라 컴포넌트의 크기를 자동으로 조정할 수 있습니다. 예를 들어, responsiveWidth와 responsiveHeight 함수를 사용하여 컴포넌트의 너비와 높이를 설정할 수 있습니다.
4. Platform API 사용: Platform API를 사용하여 플랫폼별로 스타일을 다르게 적용할 수 있습니다. 예를 들어, iOS와 Android 간에 다른 스타일을 적용하고 싶을 때 Platform.OS 속성을 사용하여 플랫폼을 구분하고, 조건문을 활용하여 각 플랫폼에 맞는 스타일을 적용할 수 있습니다.

 

 

5) flexbox

 

-> 일반 css와 달리 기본 기준축이 column

 

flex :1 

- 부모컨테이너에서  display:'flex'설정시 사용가능

( 명시되어있지 않다면 부모 컴포넌트에 기본적으로 설정된거임) 

- flex:1 

1은 아이템에 적용되는 속성으로, 해당 아이템이 유연하게 확장가능 , flex: 1을 가진 아이템은 남은 여유 공간을 모두 차지하도록 설정.

예를 들어, 부모 컨테이너에 display: flex 속성을 설정하고, 자식 아이템 중 하나에 flex: 1을 적용한다면, 해당 아이템은 남은 공간을 모두 차지하게 됩니다. 다른 아이템들과 비교하여 flex: 1을 가진 아이템이 더 많은 공간을 차지하게 됩니다.

flex: 1은 정확한 비율을 설정하는 것이 아니라, 남은 공간을 동적으로 분배하기 위한 가중치를 설정하는 개념입니다. 여러 개의 아이템에 flex: 1을 적용한다면, 각 아이템은 동일한 가중치를 가지고 남은 공간을 공평하게 분배합니다.

이렇게 flex: 1을 사용하여 아이템의 크기를 유연하게 조정할 수 있으며, 반응형 레이아웃을 구성하는 데에 유용하게 활용됩니다.

 

- flex: none

아이템 크기를 고정 크기로 설정, 아이템이 유연하게 확장되지 않도 막음

flexbox내에서 크기 조정하지 않음

 

-flex: 0

아이템 크기를 고정 크기로 설정, 유연한 아이템들과의 크기 비율 유지 

flexbox내에서 크기 조정