[2주차] 앱 화면 만들기 , 화면을 구성하는 엘리먼트

하하 여름휴가 다녀왔더니... 죽었다

[View 태그]

화면의 레이아웃을 잡는 태그. => 원하는 컨텐츠의 구역을 잡는다.

노란색 구역과 초록색 구역으로 두 개의 레이아웃을 만들었다.

각 레이아웃에 다른 색을 지정한 스타일을 넣었다.

 

[Text 태그]

문자는 꼭 text태그 안에 작성해야한다. 아무데나 적으면 에러 난다.

 

 

 

 

[스크롤뷰]

많은 양의 데이터를 나타낼 땐 스크롤을 해서 보는 게 좋다.

스크롤뷰

 

[Button 태그]

말그대로 버튼을 넣는 태그이다. 아래의 코드는 해당 버튼을 눌렀을 때 알림창이 뜨게 작성한 것이다. 알림창은 함수로 작성했다.  

<Button 
      title="버튼입니다 "
      color="#f194ff" 
      onPress={function(){
        Alert.alert('팝업 알람입니다!!')
      }}
    />

근데 View 태그로 작성하면 아이폰11은... 화면이 m자 탈모이기 때문에 상단의 중앙에 있는 것은 가려져서 안 보인다.

그래서 import 문에 SafeAreaView 를 추가하고, 최상위 View 태그를 저거로 바꿔주면 화면에 내용이 다 보이게 바뀐다.

만약 버튼을 여러개 만드는데, 각 버튼에 적용되는 함수가 똑같다면 굳이 여러줄 길게 쓰지 말고 줄여보자.

JSX 외부에서 costomAlert 이라는 함수를 만들고 각 버튼에 적용할 수 있다. 

const customAlert = () => {
    Alert.alert("JSX 밖에서 함수 구현 가능!")
}
  
  
<Button 
    style={styles.buttonStyle} 
    title="버튼입니다 "
    color="#f194ff" 
    onPress={customAlert}
  />  
 //onPress 밖에서 구현한 함수 이름을 그대로 넣을 수도 있고
    
    
<Button 
   style={styles.buttonStyle} 
   title="버튼입니다 "
   color="#FF0000" 
   onPress={() => {customAlert()}}
 /> 
 //속성에 구현한 onPress라는 함수 안에 customAlert 함수를 넣을 수도 있다

 

그렇지만 스타일을 주기 어려운 게 버튼태그의 단점이라 해당 수업에서는 TouchableOpacity로 버튼을 구현한다고 한다.

이 태그는 스타일을 따로 만들어서 적용시킬 수 있다. (버튼은 태그 안에 하나씩 적어야함)

아래는 카드형식으로 된 스타일을 적용한 TouchableOpacity태그이다.

 

[Image태그]

이미지를 넣는 태그이다. 이미지를 넣는 방법을 두가지가 있다. 프로젝트 파일 안에 있는 assets 폴더에 있는 사진을 불러오거나, 외부 이미지의 링크를 넣는 거다.

아래는 폴더 안의 사진을 불러오는 방식이다.

저 favicon 이라는 이미지가 resizeMode의  repeat때문에 바둑판 배열로 나왔다. 

 

 

 

 

resizeMode에는 다른 속성값도 많은데 예시로 cover를 해보자면

오른쪽 캡쳐와 같이 된다. 사진의 크기를 그대로 출력하는 거다.

contain속성을 쓰면 화면에 맞게 조절되기도 한다.

 

 

 

 

 

 

 

외부 이미지의 링크를 넣는 방법은 오른쪽과 같다. 

 

 

 

내부 폴더에 있는 이미지를 넣는 건 상대주소, 외부 이미지의 링크로 이미지를 넣는 건 절대주소인데 이 둘의 차이는

절대주소 : 서울시 ㅇㅇ구 ㅁㅁ동 @@빌라 

상대주소 : ㅇㅇ이네 집 오른쪽, ㅁㅁ마트에서 한 블록 위

이런 식이다. 그래서 내부 폴더의 사진을 불러올 때   . /assests/favicon.png 라고 적는데, 여기서 . / 가 상대주소를 쓸 때 사용하는 기호이다. 

 

 

[StyleSheet]

 

스타일을 만드는 거대한 딕셔너리이다.

자주쓰는 스타일 속성을 알아보자.

 

container: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent:"center",
    alignContent:"center"
  }

flex 는 합의 개념이다. 아래에서 다시 정리하겠다

backgroundcolor 는 말그대로 배경색.

justifyContent 와 alignContent는 컨텐츠의 위치를 잡아주는 속성인데 이것도 아래에서...

 

textContainer: {
    margin:10,
    padding: 10,
    borderRadius:10,
    borderWidth:2,
    borderColor:"#000",
    borderStyle:"dotted"
  }

margin 과 padding 은 항상 쌍으로 다닌다.

margin은 콘텐츠의 영역이 화면으로부터 얼마나 떨어져있느냐이고 padding은 본인이 속한 컨텐츠에서 영역을 얼마나 갖느냐라서 값을 100으로 바꾸면 아래의 첫번째 캡쳐, padding을 100으로 바꾸면 두번째 캡쳐가 된다.

borderradius 는 테두리의 구부러짐

borderwidth 는 테두리의 두께

bodercolor 는 테두리의 색깔

boderstyle 는 테두리의 모양

textStyle: {
    color:"red",
    fontSize:20,
    fontWeight:"700",
    textAlign:"center"
  }

fontweight 는 텍스트의 크기인데 100단위로 늘어난다

textalign는 텍스트의 위치! left로 바꾸면 아래와 같다.

 

[flex]

상대적인 합의 개념이다. 두 영역이 있고 각각 flex 값을 1,2 로 지정하면 합인 3을 기준으로 하나는 1/3, 하나는 2/3 의 영역을 가진다.

1,5로 지정하면 1/6과 5/6으로 나뉘는 거다.

 

영역 안에 또 영역을 나눌 수도 있는데, 아래 캡쳐를 보면 흰색 view 안에 빨간색 view 두 개, 그 중 아래 빨간 view 안에 파란view, 노란view가 있다. 

캡쳐 속 파란 영역과 노란 영역이 코드의 아래 빨간 부분 속에 속하는 거다.

 

위 코드의 containerTwo 안에 flexDirection 이란 속성을 넣고, 이 속성의 값을 row로 두면  왼->오 의 가로로 바뀐다. column은  세로방향이다.

 

justifyContent와 flexDirection은 둘 다 자리잡은 영역의 방향을 표시한다.

justityContent의 속성을 아래와 같이 두면 영역의 시작부분에 위치한다. 지금 flexDirection 을  row로 두었는데, 이 경우 영역의 흐름은 위에서 아래로 흐르기 때문에, flex-end로 바꾸면 영역의 아래에 위치하게 된다.

만약 flexDirection 의 값을 column 으로 둔다면 start 는 왼쪽, end 는 오른쪽이 된다.

그리고 간단하게 중앙에 두고 싶으면 center 를 적으면 된다.

innerTwo: {
    flex:4,
    justifyContent:"flex-start",
    backgroundColor:"orange"
  }

 

justityContent 와 반대인 속성이 있는데, alignItems 이다. 

flexDirection: 'column'에서 alignItems는 좌우 정렬, flexDirection: 'row'에서 alignItems는 상하 정렬을 뜻한다.