AWS 클라우드환경 네이티브 수업 9일차
진행
2장까지 끝 / 71~102p
요약
1. faker 데이터 생성
2. 지정 범위 랜덤 숫자 생성
3. 특정 크기의 이미지 url 랜덤하게 획득하는 법
4. 이름 지정에 따른 아바타 이미지를 얻는 법
5. ScrollView 코어 컴포넌트
6. 이벤트 속성
- button(버튼), Alert(알림메세지) , 터쳐블(눌렀을 때 반전 or 바탕색 투명도 변함) , TextInput (입력값 받아서 출력)
71p
map함수, arrow 함수 예제
주석 참고.
73~79
faker 데이터 생성 이용 실습
faker
그럴 듯한 가짜 데이터를 만드는 패키지
자바스크립트로 구현한 패키지므로 타입 스크립트에서 사용하기 위해 @types/faker 타입의 라이브러리가 필요 .
JSON.stringify(객체, null, 2) 함수
=> 객체를 문자열로 변환 시켜주는 함수
=> 현재 상태는2개의 공백 문자를 속성값에 붙여 보기 좋게 출력되도록 하는 옵션
80~84
컴포넌트 이해 실습
리액트 네이티브가 제공하는 코어 컴포넌트 (랜더링 할 때 사용)
vs API 컴포넌트 (하드웨어나 운영체제가 제공하는 기능이 필요할 때 사용)
클래스 컴포넌트 vs 사용자 컴포넌트 ( 애로우 함수 컴포넌트 만들기)
=> 함수 컴포넌트가 만들기 쉽다.
85~91
속성
: 클래스 멤버의 변수
리액트 네이티브는 속성이 바뀌면 즉시 화면에 반영을 해야 함.
이를 재랜더링이라고 한다.
string 타입 속성값은 따옴표
number 타입 속성값은 중괄호
객체 타입 속성값은 중괄호로 감싸야한다.
< Person person name="Jack" age={22} />
< Person person = {{name : 'Jack' , age: 22}} / >
속성은 부모 컴포넌트가 자식 컴포넌트 쪽으로 데이터를 전달 하고 싶을 때 사용한다.
타입
: 타입 스크립트가 코드를 자바스크립트로 컴파일할 때만 필요한 정보.
타입 스크립트로 함수 컴포넌트 구현 실습
=> FC타입 사용하여 함수 컴포넌트 구현 및 간결화
ScrollView 코어 컴포넌트
React-native에서 제공.스크롤을 쓸 수 있게 하는 컴포넌트
93~102
컴포넌트의 이벤트 속성 실습
on~이 붙는 속성 => 이벤트 속성=> 이벤트 속성은 콜백 함수를 항상 설정해야한다.
button 코어 컴포넌트
=> 리액트 네이티브에서 제공
=> title은 필수 지정 속성
<Button title="home" color="blue" onPress={() => console.log('home pressed.')} / >
Alert API
=> 리액트 네이티브에서 제공=> 함수를 호출하면 대화상자가 화면에 나타난다.
static alert (타이틀, 메세지)
터쳐블 코어 컴포넌트
=> 리액트 네이티브에서 제공
=> 버튼 디자인이 별로야. 이걸로 이쁘게 써라. 해서 생김
<TouchableOpacity> (투명도 변화) , <TouchableHighlight> (색 반전 변화)
=> 모두 자식 요소에 Text를 넣어서 구성되고 화면에 Text가 똑같이 나오지만
각각 클릭시 효과가 다름.
Text 코어 컴포넌트 <Text> 안에 onPress를 넣음으로써 버튼 역할 가능
=> 시각 효과는 전혀 없음.
TextInput 코어 컴포넌트
=> 리액트 네이티브에서 제공
<TextInput
placeholder="니이름좀적어라"
onChangeText={(text: string) => console.log(text)} // 이벤트 처리기. 터미널에서 한 글자 씩 모든 텍스트를 이벤트로 인식하여 출력한다.
onFocus={() => console.log('onFocus')} // 입력란을 터치하면 발생하는 이벤트
onBlur={() => console.log('onBlur')} // 다른 곳을 터치하면 발생하는 이벤트
onEndEditing={() => console.log('onEndEditing')} // 입력 완료 후 엔터를 하면 발생하는 이벤트
/>
※참고
ctrl + c : 매트로 서버 중지 단축키
` ` : 실행한 후 그 내용을 가져온다는 뜻 (tab 위에 있는 키)
. : 현대 디렉토리 라는 뜻 ex) ./src : 현재 폴더에 있는 src 폴더
.. : 상위 디렉토리 라는 뜻 ex) ../src : 상위 폴더에 있는 src 폴더
댓글