[section2] React intro

1. React Javascript

    a. 개념(리액트 자바스크립트란 무엇인가?)
        - 사용자 인터페이스를 만들기 위한 javascript 라이브러리
    b. 특징
        - 선언형
            1) how보다는 what에 집중하는 방식.
        - 컴포넌트 기반
        - 범용성 

2. JSX

    a. Javascript XML을 의미한다.
    b. 브라우저가 jsx를 이해할 수 있는 것은 아니기 때문에, Babel이 필요하다.
    c. Babel : JSX를 브라우저가 이해할 수 있는 javascript로 컴파일 함

3. 주요문법

    a. 태그들을 감싸주는 최상위 태그가 하나 있어야 한다.
    b. css class 속성을 주려면, className으로 표기한다. class는 자바스크립트의 class 선언으로 인식한다.
    c. jsx에서 javascript를 사용하려면 중괄호를 사용한다.(return 문 안을 의미하는 듯) 중괄호를 사용하지 않으면 일반 텍스트로 인식한다.
    d. 리액트 컴포넌트는 첫글자를 대문자로 시작해야 한다. 그렇지 않으면 일반 태그로 인식한다.
    e. 조건부 렌더링은 if 문이 아니라 삼항 연산자를 사용한다.
        - {} 안에는 표현식만 쓸 수 있는데 if문은 표현식이 아니다.(변수에 할당 불가함) 
    f. 여러 개의 HTML 엘리먼트를 표시할 때는 map함수를 사용하고, key 속성을 넣어야 한다.
        - key에는 Math.random()을 넣으면 안 된다. 겹치지만 않으면 되는 게 아니다. key는 반드시 변하지 않고, 예상가능하고, 유일해야 한다. key가 고정이 되어있으면 Virtual DOM이 rerender되지 않지만, key가 변하면, virtual DOM이 rerender 된다.

4. 컴포넌트 분리 기준(이 파트는 추후 업데이트)

    a. UI
    b. 데이터 스키마

5. create-react-app

    a. yarn create-react-app 폴더이름 입력하면 리액트 구동을 위한 모듈?들을 설치한다.

6. 다양한 렌더링 방법들

a. 함수

      let langs = ["JavaScript", "HTML", "Python"];
      let viewLangs = () => {
        return langs.map((it) => {
          return <p>{it}</p>;
        });
      };
      return <div>{viewLangs()}</div>;

b. 변수와 map 활용

1) 
      let langs = ["JavaScript", "HTML", "Python"];
      let viewLangs = langs.map((it) => {
        return <p>{it}</p>;
      });
      return <div>{viewLangs}</div>;

2) 
      let langs = ["JavaScript", "HTML", "Python"];
      return (
        <div>
          {langs.map((it) => {
            return <p>{it}</p>;
          })}
        </div>
      );

3)
      let langs = ["JavaScript", "HTML", "Python"];
      return (
        <div>
          {langs.map((it) => (
            <p>{it}</p>
          ))}
        </div>
      );