[JAVASCRIPT 공부일지] 2주차 - 2 (리액트 네이티브 - 화면을 구성하는 엘리먼트)

'리액트 네이티브' 앱 개발에서 필요한 엘리먼트(태그)에 대해 공부하고자합니다. 기본적인 엘리먼트부터 유용한 엘리먼트까지 배워보고자 합니다.

---

<앱화면 만들기 - 화면을 구성하는 엘리먼트>

1. View 태그
: 화면의 영역을 잡아주는 태그
: style코드를 입혀주지 않는 이상 화면에 표시가 되지 않습니다.

2. Text태그
: 문자를 쓸때는 항상 Text태그를 사용해주어야 합니다.
: View 태그안에 문자를 쓰게되면 오류가 발생합니다.

<Text>  텍스트입니다. </Text>

3. ScrollView 
: 앱화면을 벗어나는 경우 ScrollView 엘리먼트로 감싸면 스크롤이 가능해지면서 모든 컨텐츠를 확인할 수 있습니다.
: View 태그보다 바깥에서 구성

4. Button
: 버튼을 누르면 팝업이 뜨기도하고, 다른페이지로 넘어가기도 하는 등의 다양한 기능이 실행됩니다.

<Button ~~~~~ />

>> 이 태그 안에는 style, title, color, onPress={function(){ Alert.alert('팝업 알림입니다')}}
처럼 많은 것이 담길 수 있습니다.

4-1)
onPress에 function(함수)을 연동할 수 있고,  '화살표함수'로 요약하는 것 또한 가능합니다.
>> Alert(얼럿) 함수로 팝업의 역할을 할 수도 있습니다.
ex) 

const customAlert = () => {
    Alert.alert('팝업 알림입니다.')
}

4-2)
onPress={ } 안에 함수이름을 넣어줘도 실행이 가능합니다.

onPress={customAlert}

5. TouchableOpacity
: 버튼의 또다른 이름으로, Button태그는 본인의 고유한 영역을 가지기때문에 스타일에도 신경을 써야하는데, 
예로 ScrollView에서 View태그로 영역을 만든 경우 그 영역안에 버튼태그를 넣는 것은 꽤 번거롭습니다.
하지만 이 TouchableOpacity 영역은 스타일을 주지 않은 이상 화면에 영향을 주지 않는 영역을 갖습니다.

결론적으로, 어떤 영역에다가 팝업이나 기능을 넣고 싶다할때는 이 TouchableOpacity를 쓰는 것이 유용합니다.
Button태그보다 훨씬 범용적으로 사용이 가능합니다.

6. Image
두가지방식이 있는데,
1. assets 폴더에 있는 이미지 사용 (import)
2.  외부이미지 링크를 넣는 방법 (url)

6-1) 로컬 이미지 사용

import test_img from "./assets/test_img.png"

<Image 
        source={test_img}
        resizeMode={"repeat"}
        style={styles.imageStyle}
/>

>> import에서 이미지를 test_img이라는 변수에 넣고, 그 변수를 source = { test_img} 으로 불러옵니다.
resizeMode= { "repeat" } 는 이미지를 어떻게 보여줄건가에 대한 속성입니다. repeat은 반복시키는 것입니다.
repeat말고도, cover가 있는데 이미지를 꽉차게 하는 기능을 합니다.

6-2) 외부 이미지 링크 사용

<Image 
        source={{uri:'이미지 링크'}}
        resizeMode={"cover"}
        style={styles.imageStyle}
/>

>> 이미지의 링크를 source에 { {uri : '이미지 링크' } } 중괄호 두개 안에 넣는다.
>> url 이 아니라 uri 인 것도 유의

---

다음 공부일지에서는 자바스크립트에서 화면을 꾸미는 Style에 대해 다뤄보겠습니다.

'스파르타 코딩 클럽' 온라인 교육 플랫폼에서 배운 내용을 토대로 작성하였습니다.