8주차 정리 리액트 기초(1)

DOM 다루기 Element 생성하기

DOM(Document Object Model= 문서를 논리 트리로 표현

Vanilla js = 순수 자바스크립트

CDN(Content Delivery Network) : 웹에서 사용되는 다양한 컨텐츠(리소스)를 저장하여 제공하는 시스템

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <div id="root"></div>
  <script>
    const root = document.getElementById('root');
    
    const element = React.createElement('h1', null, 'Hello');
    console.log(element);
    ReactDOM.render(element, root);
  </script>

JSX와 Babel / JSX 다루기

JSX = 문자도 HTML도 아닌 JavaScript의 확장 문법

장점 : 모든것을 다 변수화

Babel = JavaScript Complier
컴파일러: 언어 해석기, 특정 언어를 다른 프로그래밍 언어로 옮기는 프
로그램

Babel 코드

<div id="root"></div>
  <script type="text/babel">
    const root = document.getElementById('root');
    const text = 'hello world!';
    const props = {className: titleClassName, children: text};
    const titleClassName = 'title';

    const custom1 = <h1 {...props}/>;
    const custom2 = <h1 className={props.className}>{props.children}</h1>;
    const element = custom1;

    ReactDOM.render(element, root);
  </script>

멀티 Element 생성하기

const element = (
	<React.Fragment //부모로써 감싸주는 역할
      children={[
        <h1>hi</h1>,
        <h2>hello</h2>,
        <h3>bye</h3>
        ]} />
);

const element = (
      <>
        <h1>hi</h1>
        <h2>hello</h2>
        <h3>bye</h3>
      </>
    );

여러가지 element들을 react에 주입할 수 있다.

Element 찍어내기

<div id="root"></div>
  <script type="text/babel">
    const root = document.getElementById('root');

    const paint = (title, description) => (
      <>
        <h1>{title}</h1>
        <h2>{description}</h2>
      </>
    );

    const element = <>
      {paint("good", "morning")}
      {paint("good", "afternoon")}
      {paint("good", "evening")}
    </>

    ReactDOM.render(element, root);
  </script>
</body>

//동일한 코드
const Paint = ({title, description}) => (
      <>
        <h1>{title}</h1>
        <h2>{description}</h2>
      </>
    );

    const element = (<>
      <Paint title="good" description="morning" />
      <Paint title="good" description="afternoon" />
      <Paint title="good" description="evening" />
    </>);

JS와 JSX. 섞어쓰기

const Text = ({text}) => {
      // text가 대문자로 시작하면 h1, 아니면 h3
      if (text.charAt(0) === text.charAt(0).toUpperCase()) {
        return (
          <h1> {/*jsx*/}
            {text} {/*js*/}
          </h1> //jsx
          );
      } else {
        return <h3>{text}</h3>;
      }
    }

    const element = (
      <>
        <Text text="Hello"/>
    </>
    );

function Number({ number, selected }) {
      return selected ? <h1>{number}</h1> : <h3>{number}</h3>;
    }

    const element = (
      <>
        {[1,2,3,4,5,6,7,8,9,10].map((number) => (
          <Number number={number} selected={number===3} />
        ))}
    </>
    );