React Native 3주차 강의 요약

1. 사전 기초 개념

- 단일 태그

단일 태그는 <h1></h1>가 아닌 <br/>와 같이 단일하게 만들 수 있는 태그이다.

- 익명 함수, 주석

변수에 함수를 저장해줄 수 있는데, 이 함수의 이름을 지어줄 필요가 없다. 이를 익명함수라고 한다.

JS에서 주석은 //과 /**/이다.

​

​

2. React Native

cmd 창에서 expo init Practice03 과 같이 Practice03이라는 이름의 blank 템플릿의 실습 폴더를 생성한 뒤 npm start를 입력해준다.

App.js 파일에서 rnc를 입력하고 엔터를 누르면 확장 프로그램에 의해 기본적인 틀이 생성된다.

​

여기서 React Native 실습을 진행한다.

aaa.js 라는 파일을 생성해 export 와 import, default 명령어에 대해 알아보자.

​

밑의 render함수는 component가 화면에 보일 수 있게 한다. (필수적!)

render함수의 태그들은 모두 대문자로 시작하고, 태그를 감싸는 부모 태그가 존재해야 한다. 위의 코드에서는 <View>태그이다.

​

* RN에서는 무조건 <Text>component 안에 글씨를 넣어줘야 출력된다.

​

다음 App.js의 코드는 5, 3, 4가 출력된다.

aaa.js의 export 함수는 변수 a,b를 수출하겠다는 의미이고, default는 App.js에서 중괄호 없이 변수의 import가 이루어지면 default값이 해당 변수의 이름으로 들어가게 되는 것이다.

+ as는 변수의 값을 불려와서 다른 변수의 이름으로 사용할 수 있게 한다.

​

- class

강의 자료에서 캡처한 사진.

class의 관한 설명은 다음 사진을 참고하겠다.

react native에는 this라는 키워드가 있는데 이는 객체 본인을 참조하는 키워드이다.

​

밑에 민겸이라는 객체를 만들면 Human 클래스에 넣은 '김민겸'이 this.name = name에서 작동하여 Human 클래스 안의 변수로서 활용되는 것이다.

​

extends를 이용해서 공통되는 부분이 많은 클래스를 간단하게 활용할 수 있다.

이런 식으로 ! (extends는 '확장'이라고 표현하면 된다. )

// super(age)의 코드는 부모 클래스, 즉 Animal 클래스에서 this.age = age 문장을 실행시킨다.

​

HTML과 같이 RN에서도 기본적으로 제공하는 태그가 있다.

이 태그를 이용해서 사진을 넣는 프로그램을 만들 수 있다.

이렇게 uri로 이미지의 주소를 불러와 출력할 수 도 있고

이렇게 상대경로를 이용해 require로 이미지를 불러올 수 있다.

내 최애 임현식 ㅎ.ㅎ

​

​

component의 핵심 개념을 살펴보자.

​

​

과제 해결

1.

​

2. (이따가 시간 나면...)

//11.10

aaa.js에서 App.js에 import 시키면 과제 해결.

​

​

여기까지가 3주차 강의 요약이다!