컴포넌트

1. class 컴포넌트

//recat 라이브러리를 쓰겠다.
import React from 'react';

// 정의
// class 클래스이름 extends(리액트 컴포넌트로 사용하겠다) React.Component
class ClassComponent extends React.Component{
  //클래스 컴포넌트는 꼭 render를 해줘야한다.
  render() {
    // return으로 내보낸다.
    return (<div>Hello</div>);
  }
}

// 사용
ReactDOM.render(<ClassComponent />, document.querySelector("#root"));

2. function 컴포넌트

//recat 라이브러리를 쓰겠다.
import React from 'react';

// 정의 1
function FunctionComponent() {
 return <div>Hello</div>; 
}

// 정의 2
// const FunctionComponent = () => <div>Hello</div>;
const FunctionComponent = () => {
  return <div>Hello</div>;
};

// 사용
<FunctionComponent, document.querySelector("#root") />

3. React.createElement로 컴포넌트 만들기

// React.createElement(
//   type, // 태그 이름 문자열 | 리액트 컴포넌트 | React.Fragment
//   [props],  // 리액트 컴포넌트에 넣어주는 데이터 객체
//   [...children] // 자식으로 넣어주는 요소들
// );

// 1. 태그 이름 문자열 type
ReactDOM.render(
  React.createElement("h1", null, `type 이 "태그 이름 문자열" 입니다.`),
  document.querySelector("#root")
); 

// 2. 리액트 컴포넌트 type
const Component = () => {
  return React.createElement("p", null, `type 이 "React 컴포넌트" 입니다.`);
};

ReactDOM.render(
  React.createElement(Component, null, null),
  document.querySelector("#root")
);

// 3. React.Fragment
/*
 * 일단은 root태그 바로 안에 다른 태그를 넣지 않고 바로 입력해주기 위해
 * 사용한다고 알아놓자.
 */
ReactDOM.render(
  React.createElement(
    React.Fragment,
    null,
    `type 이 "React Fragment" 입니다.`
  ),
  document.querySelector("#root")
);

// 4. 복잡한 리액트 엘리먼트 모임 - before
// <h1>안녕하세요</h1>
// <div><div><h1>주세</h1><ul><li>React</li></ul></div></div>
// 밑에처럼 복잡해진다.
ReactDOM.render(
  React.createElement(
    "div",
    null,
    React.createElement(
      "div",
      null,
      React.createElement("h1", null, "주제"),
      React.createElement(
        "ul",
        null,
        React.createElement("li", null, "react"),
        React.createElement("li", null, "dd")
      )
    )
  ),
  document.querySelector("#root")
);

4. JSX

❗JSX 문법으로 작성된 코드는 순수한 javaScript로 컴파일하여 사용한다.
누가 해주나? => babel이 변환해준다.

babel 사이트

밑에처럼 복잡한 코드를 간략하게 표현해보자.

ReactDOM.render(
  React.createElement(
    "div",
    null,
    React.createElement(
      "div",
      null,
      React.createElement("h1", null, "주제"),
      React.createElement(
        "ul",
        null,
        React.createElement("li", null, "react"),
        React.createElement("li", null, "dd")
      )
    )
  ),
  document.querySelector("#root")
);

=>

//JSX 문법으로 작성된 코드는 순수한 javaScript로 컴파일하여 사용한다.
//babel
ReactDOM.render(
  <div>
    <div>
      <h1>주제</h1>
      <ul>
        <li>React</li>
        <li>Vue</li>
      </ul>
    </div>
  </div>,
  document.querySelector("#root")
);

위에 2개의 코드는 같은 결과를 보여준다.
그래서 사람들이 jsx와 react를 많이 사용하기 시작했다.

왜 JSX를 쓰나요?

• React.createElement VS JSX
  - 가독성이 JSX가 압도적으로 좋다.
• babel과 같은 컴파일 과정에서 문법적 오류를 인지하기 쉽다.

JSX 문법

• 최상위 요소가 하나여야 한다.
  
  위의 사진처럼 최상위 요소가 2개 이상이면 error가 발생한다.

• 최상위 요소 리턴하는 경우, ()로 감싸야 한다.

• 자식들을 바로 랜더링하고 싶으면, <>자식들</>를 사용한다.=> Fragment
  

• 자바스크립트 표현식을 사용하려면, {표현식}을 이용한다.
  

• if문은 사용할 수 없다.

  • 삼항 연산자 혹은 && 를 사용한다.

• style을 이용해 인라인 스타일링이 가능하다.

• class 대신 className을 사용해 class를 적용할 수 있다.

• 자식요소가 있으면, 꼭 닫아야 하고, 자식요소가 없으면 열면서 닫아야 한다.

  • <p>어쩌구</p>
  • <br />