反応とは?

フロントエンドライブラリの一種で、DOMの状態管理を最小限に抑え、機能開発に専念することができます.

Reactの特徴

1 . 単一ページアプリケーションやモバイルアプリケーションの開発にも役立ちます.
2 . component単位で開発します.

独立ユニットモジュール(=自分のhtmlタグ)

コードの再利用性が向上し、直感性

<比較>

HTML tag >>

  <div class = "tweet">
    <span class = "userId"> @Yeonlisa </span>
    <div class = "content"> Nice to meet you </div>
    <div class = "time"> 5 min ago </div>
  </div>

	---------------------------------------

Component >>

  <Tweet userId = "Yeonlisa" time = "5">
    	Nice to meet you
  </Tweet>

ES6

reactはES 6構文を使用します.
Destructuring、spreadオペレータ、restパラメータ、defaultパラメータ、templateテキスト、arrow関数、for of loopを熟知してください.

1. Destructuring

    const numbers = [1, 2, 3, 4, 5];
    const [one, two, three, four, five] = numbers;
        console.log(one); // 1
        console.log(two); // 2
    const [one, , , , five] = numbers;
        console.log(one); // 1
        console.log(five); // 5
    function sum1 ([a,b,c]) {
        console.log(a+b+c);
    }
    sum1(numbers); // 6
    function sum2 ([a,b,...c]) {
        console.log(c);
    }
    sum2(numbers); // [3,4,5]

2. spread operator

アレイまたは類似のアレイ形態を伝播できる材料

    const arr1 = [ 1, 2, 3 ];
    const arr2 = [ 4, 5, 6 ];
    const total = [ ...arr1, ...arr2 ];
    console.log(total); // [1,2,3,4,5,6]
    -------------------------------------
    function foo (a, b, c) {
        return a + b + c;
      }
      const arr = [ 1, 2, 3 ];
      foo(...arr); // 6

3. rest parameters

関数の最後のパラメータを数値に制限されずに並べて処理する機能

    function foo (a, b, ...c) {
        console.log(c); //  ["c", "d", "e", "f"]                
        console.log(Array.isArray(c));  // true
      }
    foo('a', 'b', 'c', 'd', 'e', 'f');    
    ---------------------------------
    function foo (...a, b) {
        console.log(a);
      }
    foo(1,2,3);    
    //Rest parameter must be LAST parameter

4. default parameters

デフォルトの設定

    일반 >>
    function foo (a,b) {
        if (!a) {
            a = 10;
        }
        return a + b;
    }
    foo (100,200); // 300
    foo (0, 200); // 210 (0은 falsy)
    foo (undefied, 200); // 210
    -----------------------------------
    ES6 >>
    function foo (num = 10) {
        console.log(num);
    }
    foo (); // 10
    foo ("Yeonlisa"); // "Yeonlisa"
    foo (0); // 0
    -----------------------------------
    ES6 >>
    function getnum () {
        console.log("Yeonlisa");
        return 10;
    }
    function lognum (num = getnum()) {
        console.log(num);
    }
    lognum(); // "Yeonlisa", 10 (num에 getnum() so, getnum 실행 o)
    lognum(1000); // 1000 (getnum이 실행되지 x)
    lognum(0); // 0 (getnum이 실행되지 x)
    lognum(null);  // null 
    lognum(undefined); // "Yeonlisa", 10
    // 즉, 값이 없을 때만 default 값을 사용하는 것!

5. template literals

    const name = "Yeonlisa";
    console.log("name" + " : " + name); // name : Yeonlisa
    ----------------------------------
    console.log(`name : ${name}`) // name : Yeonlisa

6.矢印関数

    function foo (a,b) {
        return a*b;
    }
    --------------------------
    const foo =  (a,b) => a*b;
    // 매개 변수가 하나일 경우, 소괄호를 생략할 수 있다.
    // 함수 본문이 하나의 실행문일 경우, 중괄호 {}를 생략하고 한 줄에 표기할 수 있다.
    // 화살표 함수는 this, arguments 값이 없다.
    // 따라서, 기본 스코프 체인 규칙에 따라 상위 스코프에서 값을 찾는다.

7. for of loop

    const arr = ['a', 'b', 'c'];
    for (const element of arr) {
      console.log(element); // a, b, c
    }