[JavaScript - React] JavaScript & React의 기본

※   React 란?

• 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리
  • UI 라이브러리로써,  사용자 인터페이스를 구현하기 위해서 사용
  • 페이스북 엔지니어 '조던 워크' 가 만든  오픈소스 프로젝트
  • MVC 애플리케이션의 View에 관련된 영역만 담당
    • View : 사용자에게 보이는 부분 (사용자 인터페이스 영역)
  • 컴포넌트 기반 라이브러리  =>  '재사용성' 향상
  • Virtual DOM 사용

 

※  ECMAScript  &  JavaScript

• ES (ECMAScript)
  • => ECMA-262 규격에 의해 정의된 범용 스크립트 언어
    • ECMA-262: 범용 목적의 스크립트 언어, JavaScript를 표준화하기 위해 개발
• JavaScript
  • ECMAScript 사양을 준수하는 스크립트 언어
  • ECMASCript 기반에 브라우저 처리 (BOM)와 도큐먼트 처리 (DOM) 추가
  • JavaScript = ECMAScript + BOM + DOM
• ES6
  • ECMA-262의 여섯 번째 버전 (ES2015, ECMAScript 2015)
  • 2015년 이후 매년 개정 (ES6, ES7, ES8, …)

 

---

※ JavaScript  변수 선언 방식

 

(1)   var

• 선언 단계와 초기화 단계가 동시에 실행된다.  " undefined " 이 할당됨.
  
  • 호이스팅: 실제 코드의 위치는 변하지 않지만 인터프리터가 JavaScript를 해석할 때 변수와 함수의 선언을 스코프의 최상단으로 끌어올리는 것
  • 따라서 호이스팅 시, var은 호이스팅 시 초기화도 이루어져 undefined라는 값이 할당
  • 그러하여 변수 선언문 전에 참조할 수 있으며, 이 때 undefined를 반환
    • num = 70;  => 호이스팅에서 undefined으로 초기화 되었으므로, 70 할당 가능
    • console.log(num);
    • var num;
• 함수 스코프 변수
• 재선언 허용 O

 

(2)   let

• 초기화 단계, 할당 단계가  분리되어 실행된다.
  • 선언 단계:  호이스팅으로 선언 단계가 먼저 이루어지고,
  • 초기화 단계:  실제 코드에 도달했을 때 초기화 단계가 이루어진다.
    • let  num;   (선언문만 존재)  =>  num은 값을 할당 받지는 못했지만,  undefined으로 초기화 됨.
    • 물론, 초기화 단계에서 할당까지 가능함.
  • TDZ의 영향을 받아서 선언 단계와 초기화 단계 사이에서 변수를 참조할 경우 TDZ로 인해 레퍼런스 에러가 발생한다.
    • num = 70;  =>  레퍼런스 에러 발생,  호이스팅 시점에서 초기화가 되지 않았으므로
    • let num;   
    • 일시적 사각지대 (TDZ: Temporal Dead Zone):  스코프의 시작 지점부터 초기화 시작 지점까지의 구간
      다른 말로, 변수의 선언부터 변수의 초기화가 이루어지기 전까지의 구간
  • 할당 단계:  let 선언문의 변수에 undefined가 아닌 실제 값을 할당하는 단계
• 블록 스코프 변수
• 재선언 허용 X  => 선 후 순서 상관없음
• 시험식  =>  let은  호이스팅 X
  • 엄밀히 말하면 let도 호이스팅이 발생함. (undefined로 초기화가 안될 뿐)

 

(3)  const

• 초기화, 할당 단계가 반드시 동시에 이루어진다.
  • => 그렇지 않으면 문법 오류가 발생한다.
  • 선언 단계는 호이스팅 발생 시, 진행됨.
  • const num (선언문만 존재)  =>  num은 undefined으로 초기화가 안됨.
    • const num = 7; 처럼 반드시 할당까지 해야됨
  • TDZ의 영향을 받아서 선언 단계와 초기화 단계 사이에서 변수를 참조할 경우 TDZ로 인해 레퍼런스 에러가 발생한다.
• 한번 값을 할당하면 값의 수정이 불가능하다.
• 블록 스코프 변수
• 재선언 허용 X  => 선 후 순서 상관없음
• 시험식 => const는 호이스팅 X
  • 엄밀히 말하면 const도 호이스팅이 발생함.  (undefined로 초기화가 안될 뿐)

 

※  템플릿 문자열

• 기존 문자열 연결
  • 기존에는 문자열을 연결하기 위해  '+ 연산자' 를 사용하였음
  • 가독성이 많이 떨어지고, 문자열을 연결하기가 쉽지 않았음
    • ex) console.log(lastName + ", " + firstName + ", " + middleName);
• 템플릿 문자열
  • ES2015부터 ` (백틱) 사용 가능
  • `` 안에  문자열과  ${계산식}을 혼용
  • ${ } 안에 계산식에는 값을 만들어내는 자바스크립트 식이라면 어떤 것이든 가능 
    • ex)  console.log(`${lastName}, ${firstName}, ${middleName}`);
• 템플릿 문자열 활용 예시

 

 

※  함수 선언

• 함수를 만드는 방식 중에서 전통적인 방식
• function 키워드로 시작.  그 뒤에 함수 이름
  
  • function  함수이름( ) { ... }
• ★ 호이스팅 가능  =>  호이스팅 시, 선언과 동시에 초기화가 진행되므로 호출 가능 ★  

    ex)  

 

 

※  함수 표현식

• 함수를 만드는 다른 방법
• 익명함수(함수이름 X)를 이용하여 변수 or 상수에 전달
  • const 변수이름 = function() { ... }
  • 함수 호출  => 변수이름( );
• ★ 호이스팅 불가  =>  함수 표현식 전 호출 불가 ★

    ex) 

 

 

※  파라미터  &  값 반환

• 값 반환
  • 다른 언어랑 다르게 함수에서 반환형 명시없이  return만 사용하여 값 반환
• 파라미터
  • 다른 언어랑 다르게 파라미터 자료형 명시 없이 그냥 함수 이름 괄호 안에 파라미터 이름만 사용

    ex)    function  logCompliment(firstName) { return firstName }    (함수 선언)

             const logCompliment = function(firstName) {  return firstName }   (함수 표현식)

 

 

※  디폴트 파라미터

• 함수를 호출할 때, 매개변수 값을 지정하지 않으면 설정된 디폴트 파라미터를 사용
• 사용방식은 2가지
  1.  매개변수이름 = 디폴트값 (직접 설정)
  2.  객체전달 (디폴트값이 설정된 객체)
• 어떤 타입의 값이라도 디폴트 값으로 사용 가능

    ex)  1.  매개변수이름 = 디폴트값 (직접 설정)

 

   ex)  2. 객체전달 (디폴트값이 설정된 객체)

 

 

※   화살표(=>)  함수

• 기존 '함수 표현식' 보다 더 간결한 함수 생성 방법
  • 'function'  생략
  • 파라미터 1개 괄호 생략 O.   파라미터 2개 이상 괄호 생략 X
  • '단일 표현식'인 경우,  중괄호({}),  return문  생략 가능
  • '여러 표현식'인 경우,  중괄호({}),  return문  생략 불가
    • 단일 표현식:  반환 값을 포함하여 함수의 body를 1줄로 표현할 수 있는 경우
• 호이스팅 불가  =>  화살표 함수 전 호출 불가 ★

 

▶  기존 '함수 표현식'

 

 

ex1)  파라미터 1개.  단일 표현식인 '화살표 함수'

=>  파라미터가 1개이므로  파라미터 괄호( ) 생략 O

      단일 표현식이므로  중괄호{},  return문 생략 O

 

ex2)  파라미터 2개.  단일 표현식인  '화살표 함수'

=>  파라미터가 2개 이상이므로  파라미터 괄호( ) 생략 X

 

 

ex3)  파라미터 2개.  여러 표현식인  '화살표 함수'

  =>  여러 표현식으로 구성되어 있으므로  return문 생략 불가

• throw new : 함수 호출 과정에서 파라미터를 1개만 넣거나  or  아예 안넣는 경우를 방지하기 위한 키워드
  • Error()를 사용하여 에러 메세지 출력

 

 

※  화살표 함수와  this

• 화살표 함수는 스코프({ })가 무시됨.
  • 즉, 화살표 함수 내에서 this는 스코프 내의 새로운 영역이 아니고, 스코프 밖의 영역이랑 같음

 

ex1)  bind()의 개념

 

• 전역 스코프 (모든 스코프 밖) 의 this  =  undefined 
• 객체(obj) 안에 정의된 일반 함수 안의 this  =  객체(obj)
• 일반 함수 안에 정의된 인터럽트 함수의 콜백함수(일반 함수) 안의 this  =  "Window 객체"

 

bind()로 this 변경

• 콜백 함수 뒤에 .bind(this) 를 붙혀서 콜백함수 안의 this를 Window객체 => gangwon객체
  •  bind(this) == bind(gangwon)

 

 

    ex 2)  객체의 일반함수에서 '화살표 함수'로 변경

• 화살표 함수는 스코프({ })가 무시됨
• 객체 안의 일반함수를 화살표 함수로 변경함에 따라
  • 일반함수 안의 this(gangwon)의 값이 객체 밖 전역스코프의 this인  undefined 로 변경됨 
  • 콜백함수도 화살표 함수이므로 스코프가 무시됨에 따라 여기서 this도 위의 this랑 같게됨 => undefined

 

ex 3)  객체 함수 = 일반함수,  콜백함수 = 화살표 함수

• 콜백함수가 화살표 함수이므로 스코프가 무시됨에 따라
  • 콜백함수의 this는 일반함수의 this랑 같게 됨 

 

   ex 4)  위의 개념들을 응용

 

---