자바스크립트 문법/문법 정리 뼈대

1107- 노마드/ 리액트 시작. 이틀째 잠시 보류

자무카 2022. 11. 7.

리액트 강의 몇 개를 봤는데, 대부분 리액트에서는 이렇게 사용한다. 자바스크립트랑 이게 다르다인데, 노마드코더의 설명은 완전 다른 레벨이네. 게다가, 강의중에 짧게 정리, 복습을 반복해준다. 역시 본인의 이해가 깊어야 강의를 잘하는 것 같다. 중요성도 인정하지만 흠.... 다른 강의들 패턴이 바꼈는지, 입문 강의 인데, 오히려 처음 시작을 자바스크립트 문법과 비교하는 것으로 시작해서, 아무도 안쓴다면서 createReact 함수를 보여줘서... 끙. 에너지 아껴야 하는데...

그래서, 나중에 다시 보기로 했다. 처음에 머리 싸매지 않고, 가장 쉬운 맛보기 강의를 듣고자 한다. 쉬워야 집중해서 연습하고, 빨리 늘더라. 입문이 어려우면, 키보드 쳐볼 엄두도 안나고... 오히려 머리로 멍~~~하게 되더라.

react 임포트로 시작

** 뭔가 잘 안됐었는데, 범인은 버전 문제였음.

https://reactjs.org/docs/add-react-to-a-website.html#tip-minify-javascript-for-production

Add React to a Website – React

A JavaScript library for building user interfaces

reactjs.org

리액트 vscode 자동완성 오작동.

vscode 에디터에서 F1를 눌러 Open setting(JSON)를 연다.
아래의 코드를 삽입한 후 저장

    "emmet.includeLanguages": { "javascript": "javascriptreact" },

이렇게하면 JSX에서 HTML코드 자동완성이 잘 적용된다.

vanilla.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>바닐라js</title>
</head>
<body>
    <button id="btn">Click me</button>
    <span>Total clicks: </span>
</body>

<script>
    let counter = 0;
    const button = document.getElementById("btn");
    const span = document.querySelector("span");
    function handleClick() {
        counter = counter + 1;
        span.innerText = `Total clicks: ${counter}`;
    }
    button.addEventListener("click", handleClick);
</script>
</html>

바닐라->리액트

React.createElement("div", {props}, [h3, btn]

ReactDOM.render(container, root) : container를 html로 렌더링해서, div#root에 넣는다.
React.createElement()는 실제로는 아무도 안쓴다. 설명을 위해 사용함.
React.createElement( "생성할 요소", props, 1번의 내용 )
1번: 생성할 요소
2번: props 객체(이벤트, 스타일 등)
3번: 1번의 내용

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>

  <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
  <script>
    const root = document.getElementById("root");
    const h3 = React.createElement(
     "h3",
     //{ id: "sexy-span", style: {color: "red"} },
     {
      id: "title",
      onMouseEnter: () => console.log("mouse enter"),
     },
      "Hello I'm a span"
    );
    const btn = React.createElement(
      "button",
    {
      onClick: () => console.log("im clicked"),
      style: {background: "tomato"},
    } 
    , "Click me"); 
    // spn, btn 둘 다 넣기->array로
    const container = React.createElement("div", null, [h3, btn]); 
    ReactDOM.render(container, root); // div#root 안에 span 을 렌더링 한다!
    
  </script>
</html>

JSX 문법으로 변경

* babel 스크립트로 추가

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- https://babeljs.io/docs/en/babel-standalone -->
  <script type="text/babel">

     const Btn = (
      <button style={{backgroundColor: "red"}} onClick={() => console.log("I'm clicked")}>
      클릭미</button>

풀소스

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>

  <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- https://babeljs.io/docs/en/babel-standalone -->
  <script type="text/babel">
    const root = document.getElementById("root");
    /*
    const title = (
      <h3>Hello I'm a title</h3>
    );
    */
    const Title = (
      <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>Hello I'm a title.</h3>
    );
    /*
    const h3 = React.createElement(
     "h3",
     //{ id: "sexy-span", style: {color: "red"} },
     {
      id: "title",
      onMouseEnter: () => console.log("mouse enter"),
     },
      "Hello I'm a h3"
    );
    */
    /*
     const Btn = (
      <button style={{backgroundColor: "red"}} onClick={() => console.log("I'm clicked")}>
      클릭미</button>
     )
    */

    const Button = (
    <button
     style={{ backgroundColor: "tomato",}}
     onClick={() => console.log("i'm clicked")}
     >클릭</button>)
/*     
    const btn = React.createElement(
      "button",
    {
      onClick: () => console.log("im clicked"),
      style: {background: "tomato"},
    } 
    , "Click me"); 
*/
    // 여러개의 컴포넌트 넣기
    const container = React.createElement("div", null, [Title, Button]); 
    ReactDOM.render(container, root); // div#root 안에 span 을 렌더링 한다!
    
  </script>
</html>

화살표 함수로 정리. 컴포넌트->컴포넌트

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>

  <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- https://babeljs.io/docs/en/babel-standalone -->
  <script type="text/babel">
    const root = document.getElementById("root");
    const Title = () => (
      <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>Hello I'm a title.</h3>
    );

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

    const Container = () => (
    <div>
    <button>Hello</button>
      <Title />
      <Button />
    </div>);
    ReactDOM.render(<Container />, root); // div#root 안에 span 을 렌더링 한다!
    
  </script>
</html>

저작자표시 비영리 변경금지

'자바스크립트 문법 > 문법 정리 뼈대' 카테고리의 다른 글

삽질의 연속. 학습기 (리액트+노드+서버) (1)	2022.12.22
vscode 프린트 : 라인넘버, 행번호 출력 (0)	2022.12.20
JSON.stringify(), JSON.parse() (0)	2022.12.17
배열에 원소 추가: unshift, ...array, push (0)	2022.12.17
js - react - node.js - react 끙끙 (0)	2022.12.16
리액트 렌더링은 언제 언제? (0)	2022.12.16
DeepDive 학습 중 (0)	2022.11.04
39장 DOM (노드 취득, 탐색, 조작, 어트리뷰트, 스타일 ) (0)	2022.04.19