[카카오테크캠퍼스 8주차] React 기초: 시작하기

⏳ 2023. 5. 29. - 2023. 6. 4.

라이브러리 vs 프레임워크

라이브러리는 개발 편의를 위한 도구의 모음(공구),

프레임워크는 기반 구조까지(공장) 잡혀 있다.

리액트는 공식 문서에 라이브러리로 소개하고 있고, 이제부터는 리액트에 대해 알아보자!

DOM 다루기

CodeSandbox

https://codesandbox.io/

CodeSandbox: Code, Review and Deploy in Record Time

CodeSandbox is a cloud development platform that empowers developers to code, collaborate and ship projects of any size from any device in record time.

codesandbox.io

codepen보다 더 편하고 좋은 듯 ㅋㅋ

CDN

Content Delivery Network의 줄임말로,

웹에서 사용되는 다양한 컨텐츠(리소스)를 저장하여 제공하는 시스템을 의미한다.

React CDN 링크를 통해 react를 사용해보자.

<!DOCTYPE html>
<html lang="en">
  <body>
    <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 rootEl = document.getElementById("root");

      // const h1El = document.createElement("h1");
      // h1El.textContent = "Hello, world";
      const h1El = React.createElement("h1", { children: "Hello, world" });

      // rootEl.append(h1El);
      ReactDOM.render(h1El, rootEl);
    </script>
  </body>
</html>

vanilla js -> react의 경험!!

JSX

문자도, html도 아닌 javascript의 확장 문법이다.

공식적인 자바스크립트 문법이 아니기 때문에, babel을 사용해야 브라우저가 이해할 수 있다.

Babel CDN 링크를 통해 babel을 사용해보자.

<!DOCTYPE html>
<html lang="en">
  <body>
    <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>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <div id="root"></div>
    <script type="text/babel">
      const rootEl = document.getElementById("root");

      // const h1El = React.createElement("h1", {
      //   className: title,
      //   children: "Hello, world"
      // });
      const h1El = <h1 className="title">Hello, world</h1>;

      ReactDOM.render(h1El, rootEl);
    </script>
  </body>
</html>

type="text/babel" 값을 주어야 바벨이 해석할 수 있다.

JSX를 사용하면 귀찮을 수 있는 createElement를 비교적 간편하게 대체할 수 있고,

모든 것에 변수를 사용할 수 있다는 장점이 있다.

const text = "Hello, world";
const titleClassName = "title";
const h1El = <h1 className={titleClassName}>{text}</h1>;

const text = "Hello, world";
const titleClassName = "title";
const h1El = <h1 className={titleClassName} children={text} />;

const text = "Hello, world";
const titleClassName = "title";
const props = {
  className: titleClassName,
  children: text
};
const h1El = <h1 {...props} />;

모두 class가 title인 Hello, world라는 텍스트를 가진 h1을 출력하는 코드이다.

멀티 Element

지금까지는 한 요소 생성에 집중했는데, 사실 웹은 정말 많은 요소로 이루어져 있다.

그렇다면 JSX는 다중 요소를 어떻게 생성하는가?

-> children으로 객체를 주입하면 되지 않을까?

<!DOCTYPE html>
<html lang="en">
  <body>
    <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>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <div id="root"></div>
    <script type="text/babel">
      const rootEl = document.getElementById("root");

      const el = (
        <div
          className="box"
          children={[<h1>Hi</h1>, <h3>Bye</h3>, <h5>Children</h5>]}
        />
      );

      ReactDOM.render(el, rootEl);
    </script>
  </body>
</html>

그러나 이러한 방식은 children을 포함하는 부모 요소가 반드시 필요하므로,

원하는 구조가 아닐 수 있다.

그럴 때 사용하는 것이 Fragment이다.

const el = (
  <React.Fragment
    className="box"
    children={[<h1>Hi</h1>, <h3>Bye</h3>, <h5>Children</h5>]}
  ></React.Fragment>
);

const el = (
  <>
    <h1>Hi</h1>
    <h3>Bye</h3>
    <h5>Children</h5>
  </>
);

빈 태그로 열고 닫는 것도 가능하다.

Element 찍어내기

<!DOCTYPE html>
<html lang="en">
  <body>
    <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>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <div id="root"></div>
    <script type="text/babel">
      const rootEl = document.getElementById("root");

      const paint = () => (
        <>
          <h1>Hi</h1>
          <h3>Bye</h3>
        </>
      );

      const element = (
        <>
          {paint()}
          {paint()}
          {paint()}
        </>
      );

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

함수를 만들어 반복적으로 요소를 생성할 수 있다.

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

const element = (
  <>
    {paint("GOOD", "I'm good :)")}
    {paint("SO SO", "hmm..")}
    {paint("BAD", ":(")}
  </>
);

함수의 위대함..

충격

<!DOCTYPE html>
<html lang="en">
  <body>
    <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>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <div id="root"></div>
    <script type="text/babel">
      const rootEl = document.getElementById("root");

      const Paint = ({ title, description }) => (
        <>
          <h1>{title}</h1>
          <h3>{description}</h3>
        </>
      );

      const element = (
        <>
          <Paint title="GOOD" description="I'm good :)" />
          <Paint title="SO SO" description="hmm.." />
          <Paint title="BAD" description=":(" />
        </>
      );

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

<!DOCTYPE html>
<html lang="en">
  <body>
    <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>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <div id="root"></div>
    <script type="text/babel">
      const rootEl = document.getElementById("root");

      const Paint = ({ title, description, children }) => (
        <>
          <h1>{title}</h1>
          <h3>{description}</h3>
          {children}
        </>
      );

      const element = (
        <>
          <Paint title="GOOD" description="I'm good :)">
            <Paint title="GOOD CHILD" description="I'm good's child :)" />
            <Paint title="GOOD CHILD" description="I'm good's child :)" />
            <Paint title="GOOD CHILD" description="I'm good's child :)" />
          </Paint>
          <Paint title="SO SO" description="hmm.." />
          <Paint title="BAD" description=":(" />
        </>
      );

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

자식 요소의 개수에는 제한이 없다.

'카카오테크캠퍼스 > 필수과정' 카테고리의 다른 글

[카카오테크캠퍼스 8주차] React 기초: Hooks (0)	2023.05.31
[카카오테크캠퍼스 8주차] React 기초: 리렌더링, 이벤트 핸들링 (0)	2023.05.30
[카카오테크캠퍼스 7주차] JavaScript 마스터: Events (0)	2023.05.24
[카카오테크캠퍼스 7주차] JavaScript 마스터: DOM (0)	2023.05.22
[카카오테크캠퍼스 7주차] JavaScript 마스터: 동기와 비동기 (0)	2023.05.22