리액트네이티브
- 하이브리드 앱을 만드는 프레임워크
- @JavascriptInterface 를 가진 중계인 객체 이미 다 써 있음
- cf) 구글에서 낸 하이브리드 : Flutter - Dart
- flex가 기본 css
- ES6 버전 자바스크립 문법으로 만듦
[1] 변수
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS es6</title>
</head>
<body>
<script>
//ECMAScript6(2015년 발표 : ES6 or ES2015)의 새로운 문법
//1. 변수 선언 키워드 추가 let, const
//기존 var 변수
var a = 10
document.write(a + "<br>")
//혹시 같은 이름의 변수를 또 선언하면?
//var 키워드 무시
var a = 20;
document.write(a + "<br>")
//1. 새로운 let 변수
let b = 100
document.write(b + "<br>")
//같은 이름 let 변수를 또 선언하면?
//컴파일 과정에서 에러 (문법적 에러 : 치명적 에러라서 '이 script' 전체가 시작되지 않음)
//let b = 200
// document.write(b + "<br>")
//let도 값 변경 가능
b = 200;
document.write(b + "<br>")
//2. const 변수 (상수)
const c = 1000;
document.write(c + "<br>")
//상수이기 때문에 값변경 불가능
// c = 2000; //치명적 에러는 아님
// document.write(c + "<br>")
//당연히 const도 같은 이름의 상수선언하면 문법 error
// const c = 2000;
//let 변수도 동적타입 변수임은 같음
let d = "ddd";
document.write(typeof(d) + "<br>")
d = 20;
document.write(typeof(d) + "<br>")
d = true
document.write(typeof(d) + "<br>")
d = new Date()
document.write(typeof(d) + "<br>")
document.write("<hr>")
//let과 const키워드가 기존 var 키워드와 다른 또 한가지
//변수가 인식되는 범위가 다름
//기존 var 키워드 변수의 지역범위 - 함수 단위
function aaa() {
var n = 100; //지역변수
document.write(n + "<br>")
}
aaa()
//함수 밖에서 함수의 지역변수 n 사용해보기
// document.write(n + "<br>") //n 을 인식할 수 없기에 에러!!
if(true){
var m = 200; //지역 변수? 가 아님 - 함수가 아니라서
document.write(m + "<br>")
}
document.write(m + "<br>")
//대부분의 네이티브 언어들은 지역의 범위를 {}로 잡는다
// let , const는 var 과 다르게 {}가 지역단위를 이룸
if(true){
let k = 300 //지역 변수가 됨
document.write(k + "<br>")
}
document.write(k + "<br>") // 에러.. k변수 인식불가
</script>
</body>
</html>[2] 클래스
- class 안에서 멤버번수 부를 때 꼭꼭 this.변수명으로 불러야함
- 오버로딩 그딴건 없음 (안됨!)
- 오버로딩 없는 대신 파라미터의 디폴트 값을 설정 있음
- 선언적 함수는 먼저 읽어짐
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS es6 c class</title>
</head>
<body>
<script>
//객체를 생성한 새로운 방법 class 키워드 등장
//1. 클래스 선언 [객체를 만든 것이 아님]
class Person {
//멤버변수 - property
//이전엔 this.name으로 써야했음
name = "sam"
age = 20
address
//생성자 메소드 존재
constructor() {
document.write("Person 객체 생성 <br>")
/// 셍성자 안에서
// this.age = 30 //
// 생성자 안에서 샐운 멤버변수 추가 가능
this.tel = "01012345678"
}
//멤버함수 - method
//이전에 키워드 function 써야 했음
show() {
//document.write(name +", " + age + "<br>") //error
//this 키워드 함수에선 꼭!!!!!!!! 써야함
document.write(this.name +", " + this.age + "<br>")
}
}
//2. 객체 생성
let person = new Person()
person.show()
//값을 입력하지 않은 멤버 출력
document.write("address : " + person.address + "<br>") //address : undefined
document.write("tel : " + person.tel + "<br>")
</script>
<hr>
<script>
//같은 .html문서에서 연결한 다른 스크립트의 Person 클래스 사용가능?
//위에서 이미 호출돼서 사용 가능함
let person2 = new Person()
person2.show()
//객체를 생성하면서 값 전달 - 생성자의 파라미터 전달
class Member {
// constructor(id, pw) {
// this.id = id
// this.pw = pw
// }
//생성자 오버로딩??? - 치명적 에러 (생성자의 오버로딩 없음!)
// constructor(){
// this.id = "아이디 없음"
// this.pw = "비번 없음"
// }
//오버로딩 같은 효과를 주고 싶다면 - 파라미터의 디폴트 값을 설정
constructor (id = "없음", pw = "없음"){ //값을 받으면 받은 값 안받으면 디폴트 값
this.id = id
this.pw = pw
}
show(){
document.write("id : " + this.id +", PW :" + this.pw + "<br>")
}
//일반 메소드도 오버로딩이 안됨? 안됨!
out(){
document.write("no data")
}
//JS는 오보로딩 존재하지 않음 함수 덮어쓰기가 됨
out(a){
document.write(`data? ${a} <br>`)
}
//리턴 메소드
add(a,b) {
return a+b
}
//메소드를 익명함수로 만들 수 있음
display = function(){
document.write(`display 익명 함수 <br>`)
}
// class 밖에 정의한 함수를 메소드로 등록 할 수 있음
// 선언적 함수는 쓴 순서와 상관없이 먼저 인식이 돼서 여기서 부를 수 있음
play = aaa
}
let member = new Member("abcd","1234")
member.show()
//혹시 값을 전달하지 않으면?
let member2 = new Member()
member2.show() //id : undefined, PW :undefined
//이럴때 생성자 메소드 오버로딩 시도
//일반 메소드 오버로딩 했을 때
member.out()
member.out(10)
let sum = member.add(5,6)
document.write(`sum? ${sum} <br>`)
//익명함수로 정의한 메소드 호출
member.display()
// 선언적 함수 정의
function aaa() {
document.write(`aaa + ${this.id}`) //멤버 밖에서도 부를 수 있음...뭐냐...
}
//외부 함수를 메소드로 등록하고 호출
member.play()
</script>
<hr>
<script>
//class 상속
//상속해줄 클래스 [이름 나이]
class Human {
constructor(name, age) {
this.name = name
this.age = age
}
show() {
document.write(`name : ${this.name}, age : ${this.age}`)
}
}
let h = new Human("sam", 200)
h.show()
document.write(`<br>`)
// 상속받기 [학생 : 이름 나이 전공]
class Student extends Human {
constructor(name, age, major) { //에러
// this.name = name - 부모것 건드는 거 안됨!
//JS 는 반드시 명시적으로 부모 생성자를 호출해야만 함, 안하면 에러
super(name, age) //부모 클래스 생성자에게 값 전달 요청! 필수!
//값 전달 하든 안하든 모조건 해야됨]
this.major = major
}
//상속 받은 메소드를 수정 - 오버라이드
show() {
super.show() // 부모의 show를 통해 name과 age 출력
document.write(` ,major : ${this.major} <br>`)
}
}
let stu = new Student("robin",22,"android")
stu.show()
</script>
<hr>
<script>
//static 멤버
</script>
<hr>
<script>
//구조분해 할당 문법.!!!!!!!!!!
//리액트에서 좋아함 중요~
</script>
</body>
</html>
보조기억장치