23.03.13

학습내용

1. React
2. JS DataType
3. var, let, const 차이점
4. React Arrow Function
5. Destructuring Assignment/Spread Operater

Question
1. parsing rendering 차이

React

• JSP는 Server Side에서 html을 만들어서 client에 전달하고 client의 브라우저는 해당 html을 parsing하여 사용자에게 보여주는 형식이다.
• React는 JSP와는 다르게 Client Side에서 JavaScript와 JavaScript를 확장한 문법인 JSX를 통해 html을 만들어서 사용자에게 보여주는 기술이다.
• 내부적으로 JavaScript를 runtime중 사용 가능하게 해주는 node.js를 사용하며 html을 component화 하여 재사용성, 확장성, 결합성이 높다.

JS DataType

• JavaScript의 DataType은 값을 할당하는 순간에 결정되며 이를 Dynamic Typing이라 한다.

  var a = '홍길동'; //데이터타입은 문자열
  var b = 10; // 데이터타입은 숫자형

• 변수를 선언만 하고 값을 할당하지 않았다면 undefine이 되며 null과는 다른 상태이다.

var, let, const 차이점

1. 변수 값의 반환

   • var : 변수를 선언 한 뒤 동일한 이름의 변수를 다시 선언 할 수 있으며 값도 변경 가능하다.

     var name = "firstName";
     var name = "secondName"; //해당 변수를 선언하여도 에러가 발생하지 않는다.

• let: 변수를 선언 한 뒤 동일한 이름의 변수를 선언할수 없지만 값의 변경은 가능하다.

  let name = "firstName";
  // var name = "secondName"; 해당 변수 선언시 에러 발생
  name = "secondName"

• const: 변수를 선언 한 뒤 동일한 이름의 변수를 선언 할 수 없으며 값의 변경도 불가능하다

  const name = "firstName";
  // const name = "secondName" 해당 변수 선언시 에러 발생
  // name = "secondName" 변수 값을 변경시 에러 발생

React Arrow Function

• 기존의 JavaScript function은 아래와 같이 선언이 가능했다.

  function testFunction() {
        console.log("\n testFunction()");
      }

• React의 JSX는 다음과 같은 Arrow Function을 제공한다.

  testArrowFunction01=()=> {
        console.log("\n testArrowFunction()");
      }

• 변수 안에 function을 넣는 기능도 제공한다. 해당 function은 java의 anonymous method와 같이 동작한다.

  const sum02=(num1, num2)=>{
        console.log("\n const sum02=(num1, num2)=> : 익명함수")
        return num1 + num2;
      }

• function parameter에 default값을 설정 가능하며 해당 parameter가 들어오지 않은경우 default 값으로 대체된다

  const sum04=(num1, num2=100)=> num1+num2;

Destructuring Assignment/Spread Operater

• 기존 JavaScript에서 배열을 정의하고 배열의 변수를 추출하는 과정은 아래와 같다.

  const a = ['1', 2];
  
  const x = a[0];
  const y = a[1];

• Destructuring Assignment는 좀 더 편리하게 변수를 추출하는 기능을 제공한다

  const a = ['1', 2];
  let[x,y] = a;

• 기존 JavaScript에서 배열의 여러 요소를 초기화하는 방법은 아래와 같다.

  let arr01=['a11', 'a12'];
  let arr02=['a21', 'a22'];
  
  let newArr03 = [arr01[0], arr01[1], arr02[0], arr02[1]];
  let newArr04 = [].concat(arr01, arr02);

• Spread Operater는 ... keyword를 사용하여 편히리하게 초기화를 가능하게 해준다.

  let arr01=['a11', 'a12'];
  let arr02=['a21', 'a22'];
        
  let newArr03 = [...arr01, ...arr02];

Question

Q. parsing rendering 차이

A. parsing은 html 문서의 텍스트들을 조작 할 수 있는 자료구조로 변화하는 과정이며 rendering은 이렇게 변환된 자료구조를 메모리에 적재하여 사용자의 화면에 출력하는 과정이다.