https://ko.reactjs.org/docs/getting-started.html

React

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

JSX

React “엘리먼트(element)” 를 생성한다.
JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있다.
{} 안 공간은 script 태그 공간 안이라고 생각하면 될 것 같다.
JSX는 한개의 태그만 생성할 수 있기 때문에 꼭! 태그가 두개 이상이라면 div와 같은 태그로 감싸주어야 한다.

변수선언해 사용하기

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

리액트 DOM

camelCase로 적는다.
JSX에서 class는 className로 적어야 한다.

const Sidebar = () => {
  return (
    <section className="sidebar" />
  );
};

element

화면에 표시할 내용
엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다.
React 엘리먼트는 사용자 정의 컴포넌트로도 나타낼 수 있다.

component

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;

컴포넌트는 JavaScript 함수와 유사하다.

• 컴포넌트는 대문자로 시작한다.
  React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리하기 때문!

---

map으로 렌더링!

let langs = ["JavaScript", "HTML", "Python"];

  let viewLangs = langs.map((it) => {
      return <p>{it}</p>;
    });
    
  return (
    <div>
      {viewLangs}
    </div>
  );

화살표함수 주의!

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

  return (
    <div>
      {viewLangs()}
    </div>
  );

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

• viewLangs 가 화살표 함수 표현식으로 선언되어 있기 때문에 함수를 호출하는 연산자 () 를 써야 작동한다. {viewLangs()}
• 화살표함수에서 () 를 사용하면 () 안의 값이 return 값이 된다.