React 강의 1일차

↓이러한 방식은 사용하지않지만 알아두면 도움이 된다!

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

생성과 동시에 이벤트를 처리할수있넹?

 const h3 = React.createElement
        (
            "h3", 
        {
            id: "title",
            onMouseEnter: () => console.log("mouse enter"),
        }, 
        "Hello i'm a span"
        );

1. ReactDOM.render() 함수를 통해

Web API(document.createElement)를 사용하여 웹 브라우저에 그려주는 함수.

 <div id="root"></div>
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script>
        const root = document.querySelector("#root");
        const span = React.createElement ("span", null, "Hello i'm a span");
        const btn = React.createElement("button", null, "");
        const container = React.createElement("div", null, [span, btn]);
        ReactDOM.render(container, root);

2. JSX - javascript를 확장한 문법

사용하려면 babel 설치 ??
babel은 jsx 코드를 react문법으로 변환해주는 ??

const Title = <h3 id="title" onMouseEnter = {() => console.log("mouse enter")}> Hello i'm a title </h3>

3. 컴포넌트(Component) ❗❗❗❗

컴포넌트는 리액트에서 앱을 이루는 최소한의 단위이다.
리액트로 만든 앱은 여러개의 컴포넌트로 구성을 이룬다.
❗❗컴포넌트의 첫 글자는 반드시 대문자❗❗]

컴포넌트 예시

function Title() {
        return (
          <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
            Hello i'm a title
          </h3>
        );
      }

컴포넌트 예시 (화살표함수)

const Button = () => (
        <button
          style={{
            backgroundColor: "tomato",
          }}
          onClick={() => console.log("im clicked")}
        >
          Click me
        </button>
      );

컴포넌트 안에 컴포넌트

const Container = () => (
        <div>
          <Title /> // 컴포넌트
          <Button /> // 컴포넌트
        </div>
      );