Notice
Recent Posts
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
관리 메뉴

공부기록용

ReactJS로 영화 웹 서비스 만들기(~02/첫 코드 이해하기) 본문

📚강의록📚/노마드)React

ReactJS로 영화 웹 서비스 만들기(~02/첫 코드 이해하기)

과부하가즈아 2023. 7. 11. 14:46

https://nomadcoders.co/react-for-beginners/lobby

 

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders

왕초보를 위한 React

nomadcoders.co

암기 노노!!!!!

<!DOCTYPE html>

<html>

    <body>
        <div id="root"></div>
    </body>
    <!-- import -->

    <!-- React JS -->
    <script src ="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script> 
     <!-- ReactDOM  -->
    <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") // react js로 element(span태그)생성

        // 넣을 html 태그, {}js요소 넣기 id값/style등등, 내용 -> <span id="item-span">Hello i'm a span</span>
        const span = React.createElement(
            "span", 
            { id: "item-span", style: { color:"red" } }, 
            "Hello, i'm a span")
        ReactDOM.render(span, root); // render : React element를 가지고 HTML로 만들어서 배치한다. 사용자에게 보여준다. 
    </script>


</html>
<!-- React JS -->
<script src ="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script> 
<!-- ReactDOM  -->
<script src ="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

cdn을 사용해서 온라인에서 바로 라이브러리를 끌어오는 것 react 의 js 파일(라이브러리)

<div id="root"></div>

> 비어있는 div는 ReactDOM이 React element를 가져다 놓을 곳

const root = document.getElementById("root");

> 그래서 root div를 가져온 후

ReactDOM.render(container, root); 
// render : React element를 가지고 HTML로 만들어서 배치한다. 사용자에게 보여준다.

> ReactDOM.render( )

: React element들을 root div안에서 보여

 

리액트를 import했기 때문에 createElement function을 가진 리액트 object에 접근 가능
const span 그러나 createElement(“span”) 은 반드시 생성하고자 하는 HTML 태그와 똑같아야함

React JS

: 어플리케이션이 아주 인터랙티브하도록 만들어주는 library. 엔진과 같다. element를 생성하고 eventListener를 더하는 것을 도와준다. 
React-dom

: library 또는 package. 모든 react element들을 HTML body에 둘 수 있도록 해줌.

ReactDOM.render() : render의 의미는 react element를 가지고 HTML로 만들어 배치한다는 것. 즉, 사용자에게 보여준다는 의미
ReactDOM.render(span, span이 가야할 위치) :  그래서 보통 body에 id=“root” 만들어서 span을 root 안에 두라고 함

const span = React.createElement(
        "span", 
        { id: "item-span", style: { color:"red" } }, 
        "Hello, i'm a span")

▼

<span id="item-span">Hello i'm a span</span>

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

: property는 class name, id도 가능 style도 가능-> 참고만 하고 외우지 말기. 이렇게 쓸 일 없음


바닐라JS는 HTML -> JS 순서

리액트는 JS -> HTML 순서

 

JS가 element를 생성하고 React JS가 그것을 HTML로 번역하는 것
React JS는 업데이트 해야 하는 HTML을 업데이트 할 수 있음

<!DOCTYPE html>

<html>
  <body>
    <div id="root"></div>
  </body>
  <!-- import -->

  <!-- React -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <!-- ReactDOM  -->
  <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", null, "Hello, i'm a span");

    const btn = React.createElement("button", null, "Click me");

    ReactDOM.render(btn, root); // render : React element를 가지고 HTML로 만들어서 배치한다. 사용자에게 보여준다.
  </script>
</html>
const btn = React.createElement("button", null, "Click me");
ReactDOM.render(btn, root);

span과 button둘 다를 가져오고 싶다면

<script>
  const root = document.getElementById("root");

  const span = React.createElement("span", null, "Hello, i'm a span");

  const btn = React.createElement("button", null, "Click me");

  const container = React.createElement("div", null, [span, btn]);  
  ReactDOM.render(container, root);

</script>

변수 container에 div요소를 만들어주고 배열[ ]에 같이 넣어주고 그 변수를 render에 넣어준다. 

ReactDOM은 container element를 root div안에 render할 것이고, 그 div의 content들은 h3, btn이다. 

<!DOCTYPE html>

<html>
  <body>
    <div id="root"></div>
  </body>
  <!-- import -->

  <!-- React -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <!-- ReactDOM  -->
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

  <script>
    const root = document.getElementById("root");

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

    const btn = React.createElement(
        "button", 
        { onClick: () => {console.log("i'm clicked")} }, 
        "Click me"
        );

    const container = React.createElement("div", null, [h3, btn]);

    ReactDOM.render(container, root); // render : React element를 가지고 HTML로 만들어서 배치한다. 사용자에게 보여준다.
  </script>
</html>

const h3 = React.createElement(
    "h3", 
    { id: "title", 
    onMouseEnter: () => {console.log("mouse enter")} 
    }, 
    "Hello, i'm a span"
    );
const btn = React.createElement(
   "button", 
   { onClick: () => {console.log("i'm clicked")},
     style: {
       backgroundColor: "tomato",
       }
   }, 
   "Click me"
   );

createElement를 이용해서 요소를 만들고

{ } onMouseEnter, onClick를 통해 eventListener등록하고 (React_on + event = eventListener)

"Hello~", "Click me"와 같은 내용도 넣어주고 리엑트로 인해 한 번에 코드를 작성할 수가 있다. 

createElement 대체하기

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

💫이렇게 적용하기 위해서는 변환기인 bable이 필요하다.(bable이 브라우저가 읽을 수 있는 코드로 바꿔서 head에 담는다.)

> 위에서 createElement로 요소를 만들고 eventListener를 통해서 동작을 걸어줬던걸 그대로 head에서 확인해볼 수 있다. 

babel의 js 파일(jsx 컴파일러)

<!-- babel추가 -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

> 추가해주고

<script type="text/babel">

> type도 지정해준다. 

JSX

<!DOCTYPE html>

<html>
  <body>
    <div id="root"></div>
  </body>
  <!-- import -->

  <!-- React -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <!-- ReactDOM  -->
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <!-- babel -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

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

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

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

    const container = React.createElement("div", null, [Title, Button]);

    ReactDOM.render(container, root); // render : React element를 가지고 HTML로 만들어서 배치한다. 사용자에게 보여준다.
  </script>
</html>

똑같이 작동하게 된다.

const container = React.createElement("div", null, [Title, Button]);

역시 jsx로 바꿔주자

 

Title와 Button을 함수로 만들어주기 (component, 항상 대문자로 시작하기)_return문안에 소괄호로 감싸주고 넣어주기

function Title() {
      return (
        <h3
          id="title"
          onMouseEnter={() => {
            console.log("mouse enter");
          }}
        >
          Hello, i'm a span
        </h3>
      );
    }
// 1.
function Button() {
  return (
    <button
      style={{ backgroundColor: "tomato" }}
      onClick={() => {
        console.log("i'm clicked");
      }}
    >
      Click me
    </button>
  );
}


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

> 되도록 function으로 작성해주기

const Container = <div>
    <Title/>
    <Button/>
</div>;

코드를 분리한 후에 함께 렌더링하는 것

 

💫Function() vs Const = () =>

 범위 ( Scope)의 차이

function () 같은 경우는 다른 문장의 가장 상단에서 읽히는 hoisting 이 허용이 되고,
const = () => 같은 경우에는 block 내부에서만 구현이 가능한 범위를 가지고 있으며, 다시 선언이 될 수 없다는 특징을 가지고 있다.

위와 같은 이유를 통해, 일반적으로는 hoisting을 지원하는 function을 더 선호한다.

const로도 함수를 지정하는게 있구나 정도로만 알아두기

'📚강의록📚 > 노마드)React' 카테고리의 다른 글

ReactJS로 영화 웹 서비스 만들기(04_2/props활용, React.memo)  (0) 2023.07.13
ReactJS로 영화 웹 서비스 만들기(04_1/props이해하기, props추출)  (0) 2023.07.13
ReactJS로 영화 웹 서비스 만들기(03_3/state활용)  (0) 2023.07.12
ReactJS로 영화 웹 서비스 만들기(03_2/state활용)  (0) 2023.07.12
ReactJS로 영화 웹 서비스 만들기(03_1/state기초)  (0) 2023.07.11
'📚강의록📚/노마드)React' Related Articles more
Comments