JiSoo's Devlog

[ReactJS로 영화 웹 서비스 만들기] Section 1 본문

Frontend/React

[ReactJS로 영화 웹 서비스 만들기] Section 1

지숭숭숭 2024. 1. 5. 19:31

React JS는 UI를 interactive하게 만들어 준다

React JS를 설치하기 위해서는 두 개의 JavaScript 코드를 import 해야 한다 -> react, react-dom

<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>

 

ReactJS의 규칙 중 하나는 HTML을 페이지에 직접 작성하지 않고 JavaScript와 ReactJS를 이용해 element 생성

react-dom은 모든 React element들을 HTML body에 들 수 있게 해 준다

 

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <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.getElementById("root");
    const span = React.createElement(
      "span",
      { id: "sexy-span", style: { color: "red" } },
      "Hello I'm a span"
    );
    ReactDOM.render(span, root);
  </script>
</html>

 

ReactDOM.render()은 react element를 HTML로 만들어 배치

 

React.createElement("span", {span의 property}, “span 내용”)

 

property는 classname, id 가능, style도 가능

 

바닐라 JS에서는 HTML -> JavaScript

React JS에서는 JavaScript -> HTML

 

const root = document.getElementById("root");
    const h3 = React.createElement(
      "h3",
      {
        id: "title",
        onMouseenter: () => console.log("moue enter"),
      },
      "Hello I'm a span"
    );
    const btn = React.createElement(
      "button",
      {
        onClick: () => console.log("im clicked"),
        style: {
          backgroundColor: "tomato",
        },
      },
      "Click me"
    );
    const container = React.createElement("div", null, [h3, btn]);
    ReactDOM.render(container, root);

 

두 가지를 render 하고 싶다면 div처럼 content에 배열을 넣어도 된다

property에 eventListener 넣기도 가능

 

JSX는 JavaScript를 확장한 문법

JSX로 React 요소를 만드는 게 개발자들 입장에서 편하다

const Title = (
  <h3 id="title" onMouseenter={() => console.log("moue enter")}>
    Hello I'm a span
  </h3>
);
const Button = (
    <button
      style={{
        backgroundColor: "tomato",
      }}
      onClick={() => console.log("im clicked")}
    >
      Click me
    </button>
 );

 

property는 마치 HTML 태그의 속성처럼 적으면 된다

 

컴포넌트의 첫 글자는 반드시 대문자

const root = document.getElementById("root");
    function Title() {
      return (
        <h3 id="title" onMouseenter={() => console.log("moue enter")}>
          Hello I'm a span
        </h3>
      );
}
const Button = () => (
  <button
      style={{
        backgroundColor: "tomato",
      }}
      onClick={() => console.log("im clicked")}
  >
      Click me
  </button>
);

const Container = () => (
  <div>
    <Title />
    <Button />
  </div>
);
ReactDOM.render(<Container />, root);

 

div에 const 넣기 위해서 const를 함수로 만들어 주기

arrow function

const 이름 = () => (); 는 function 이름() {return ();} 과 같다

 

728x90

'Frontend > React' 카테고리의 다른 글

[ReactJS로 영화 웹 서비스 만들기] Section 3  (0) 2024.01.09
[ReactJS로 영화 웹 서비스 만들기] Section 2  (1) 2024.01.08
[Udemy React 완벽 가이드] Section 15  (2) 2024.01.04
[Udemy React 완벽 가이드] Section 14  (1) 2024.01.04
[Udemy React 완벽 가이드] Section 13  (2) 2024.01.04
'Frontend/React' Related Articles more