FrontEnd
Javascript
Diary
ML
CS
Django
Algorithm
AWS
Co-Work
HTML
CSS
Python
React
ReactNative

3.RN 들어가기전에 JS사전지식

RN 들어가기전에 JS사전지식

안녕하세요!!!

본격적으로 React-Native 에 대해 들어가기전에 React-Native의 바탕이 되는 React 의 바탕 JavaScript에 대해서 알아보도록 합시다

👀 해당 자료는 빠르고 쉬운 이해에 포커스를 맞췄습니다. (자세한 JavaScript 자료는 나중에 꼭 공유하도록 할께요!! 필요하신 분이 계시다면..)

JavaScript란 무엇일까?

(Java 랑은 다른 언어입니당 마케팅차원에서 이름을 비슷하게 지었더라는…)

  • 움직이는 것(동적인 것)을 웹페이지에 적용할 수 있게 하는 언어
  • 웹 브라우저에서 사용할 수 있는 언어 (현재 대체재가 없습니다)
  • NodeJS, 구글의 V8엔진, React Native 등 여러 분야에 활용되고 있어 Hot한 언어

Untitled.png

GitHub에서 많이 사용하는 언어(출처 : https://d2.naver.com/helloworld/4007447)

이와 같은 인기를 반영하기라도 하는듯 하루가 다르게 라이브러리가 나오고 있어서 공부할 것도 끊이질 않아요😂

ECMA ? JS ? ES? 용어정리

우리가 알고있는 JavaScript 는 사실 ECMA의 부분집합 같은 것입니다.

JavaScript 비슷한 친구가 더 있는데 이처럼 브라우저에서 쓰이는 언어들이

제각각이 되버리자 표준이 필요하게 되었습니다.

그래서 만들게 된것이 ECMAScript입니다.

ECMAScript : 표준화 작업을 한 아이

ES : ECMAScript의 약자

따라서 우리가 소위 JavaScript라고 부르는 친구는 ECMAScript였다는 것을 알게 되었습니다.

(하지만 편의상 JS라고 계속 부르겠습니다)

JS의 함수

생성

  • 함수 선언문(리터럴) 방식 (비권장)
function add(a, b) {
    return a + b
}

//사실 이 방법은 밑에 나올 함수표현식의 방법으로 선언한것과 같습니다
// const add = function add(a,b){ return a+b } 이런 방법으로
  • 함수 표현식방식(함수도 객체에 기인한 방식)
const add = function(a, b) {
    // 함수이름을 선언 안해줬는데 이를 익명함수라 합니다
    return a + b
}

console.log(add(1, 2)) //출력 3

//밑에서 설명을 하겠지만 add가 function 객체를 참조하는 것입니다.
  • 생성자 이용(비권장)
const add = new Function('a', 'b', 'return a+b')

console.log(add(1, 2)) //출력 3
  • 생성자 함수? (몰라도 댑니당)

    만약 우리가 선언한 함수앞에 new를 붙이면 생성자와 같이 이용할수 있다.

    const MyFunction = function (a,b){
    	this.name = a ;
    	this.age = b ;
    } ;
    
    const myobject = new MyFunction('likelion',7)
    
    myobject ==> MyFunction {name: "likelion", age: 7}

    생성자함수는 객체를 생성하고 리터럴 방식의 객체생성과 다르게

    함수의 재사용으로 동일한 모양의 객체를 여러번 생성해줄수 있다.

    이처럼 우리의 함수가 생성자처럼 사용되는것을 구별하기 위해 첫글자를 대문자로 한다

    이때 일반 함수 속의 this는 전역객체를 가리키는 반면 생성자함수의 this는 객체를 가리킨다

  • 지금부터는 ES6에서 추가된 주요기능들을 공부해 봅시다

let(변수), const (상수)

  1. 기본적으로 const(변경 불가) 를 쓰고 그 이후에 let(변경 가능)을 사용하도록 하자
  2. const 는 선언과 초기화를 같이 해줘야하고
const a = 1
const a    // Error
  1. let은 선언만 해줄 수 있습니다
let b = 1
let b //가능
  1. var는 쓰지 맙시당
  2. let과 const의 차이(심화)

let과 const 둘다 객체를 참조하는데 사용될 수 있습니다

JS에서는 객체에 접근하여 property를 변경하는 것이 가능한데

const myObject = {
a : 1,
b : 2
}

myObject.c = 3

myObject
{a: 1, b: 2, c: 3}

이처럼 const도 마치 변경이 가능한 것 처럼 보입니다

그래서 정확한 let과 const 의 차이는 재 할당이 가능한지 불가능한지 여부입니다

const a = 객체1
let b = 객체2

위의 식에서 a 와 b모두 객체를 참조하고 있습니다

정확하게 말하면 a와 b는 각각의 객체가 위치한 주소저장한건데요

따라서 우리는 a 와 b를 통해 객체가 있는 곳으로 총총 따라가서 사용할 수 있게 되는 것입니다

즉 재할당이란 a와 b에 새로운 주솟값이 저장될수 있는지 아닌지를 말하는거지

const가 가리키는 객체가 변경 불가능 하다의 의미는 아닙니다

const a = 1
a = 2 //이 경우에도 재할당이 안되는 것입니다!! 주솟값이 아닌 value값이
  • var와 let의 차이점(심화)

기존에 var 은 함수단위로 scope를 가지고 있었습니다. 따라서

for (var i = 0; i < 5; i++) {
    console.log(i)
}

console.log(i) //출력값 4

이렇게 {} 로 묶인 블록 밖까지 i라는 애가 영향을 미치는데(구체적으로는 호이스팅)

이를 방지하기 위해 즉시실행함수로 감싸줘야 했습니다

;(function() {
    for (var i = 0; i < 5; i++) {
        console.log(i)
    }
})()

console.log(i) // ReferenceError

뿐만아니라 var은 var i = 0 이렇게

한번 선언 및 초기화를 해준 변수도 다시 선언과 초기화를 해줄수 있습니다.

이와 같이 함수 단위로 scope를 가지게 되면 여기저기 variable들이 뒤죽박죽 될수 있겠죠!

하지만 let( { },블록 단위 scope)을 사용해지면 이러한 부분에서 자유로워 질수 있습니다

for (let i = 0; i < 5; i++) {
    console.log(i)
}

그리고 let으로 선언한뒤 다시 let 으로 선언 할수 없기에

재선언으로 인한 data유실을 막을 수 있습니다.

var 이든 let이든 안 붙이면 호이스팅 되어 전역객체를 건드리게 되므로 let을 사용하도록 합시다

혹은 var를 이미 사용하고 있는 경우라면 use strict라는 장치를 이용하도록 합시다

모듈 사용방법(import:불러오기, export:내보내기)

모듈은 하나의 프로그램(파일)이라고 보면 됩니다

마치 브라우저에서