framework/react

1. The basic of React

wooweee 2023. 6. 4. 20:45
728x90

1. 소개

  • react가 왜 만들어졌는지, 어떤 문제를 해결할려고 생겼는지 알아함
  • 생 JS랑 비교해서 어떤 장점이 있는지 비교하면서 왜 필요한지 알게 됨
  • react는 좋은 지름길을 만들어 놓은 것.
  • 물론 따라야하는 규칙이 많이 존재하기는 함

1.1. React import

  • 3가지 import
    1. react file import
    2. react dom import
    3. babel import
  • 작성 위치
    body tag 밑에 작성
    • <body> </body>
      <script src="~~~">
  • 코드
<!DOCTYPE html>
<html>
  <head></head>
  <body></body>
  <!-- body 끝 -->

  <!-- js에 react를 넣기 위해 2가지 js code가 필요하다  react, react-dom-->
  <!--react : react에 관한 코드가 txt형태로 나타남-->
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <!--react-dom : text code를 dom 형식으로 변경-->
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <!--babel : jsx 문법을 old one으로 변경-->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  <script type="text/babel"></script>
</html>
  • console 창 react 적용됨을 확인

 

2. old react 방식

  • JS로 counter 만들기
<!DOCTYPE html>
<html>
  <body>
    <span>Total click: 0</span>
    <button id="btn">Click me</button>
  </body>
  <script>
    let counter = 0;
    const button = document.getElementById("btn");
    const span = document.querySelector("span");
    function handleClick() {
      counter += 1;
      span.innerText = `Total clicks: ${counter}`;
    }
    button.addEventListener("click", handleClick);
  </script>
</html>

2.1. 오래된 방식 React - createElement(), ReactDOM.render()

  • React의 핵심 : 모든 것이 JS로 시작해서 HTML로 뿌려주는 방식 = react가 html를 update를 컨트롤 할 수 있음을 시사
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div> <!--render시 2nd params로 사용-->
  </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 am span content!"
    );

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

 

  • 문법
    1. ReactDOM.render(react_element, html내에 존재하는 tag)
      • 1st params: createElement()를 담은 변수명
      • 2nd params: 해당 html의 tag의 변수명. createElement를 담을 공간
    2. createElement()
      • 1st params : tag 명
      • 2nd params : 1st Tag의 property
      • 3rd params : html form에 보이는 실제 글자(contents)

 

3. old react 방식 - event , vanilla JS 비교

 

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div> <!--render시 2nd params로 사용-->
  </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 h3 = React.createElement(
      "h3",
      // {id : "sexy-span", style:{color:"red"}},
      null,
      "hello, i am span content!"
    );
    // 변수명이 tag와 동일할 필요 없다.
    const btn = React.createElement("button", null, "Click me - content")
    // 2가지 createElement 요소 다 넣는 방법
    const container = React.createElement("div", null, [h3, btn]) // 배열로 위의 2개 변수 넣음

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

 

  • event 주기
  • 참고로 property를 넣는 칸({})에는 ,를 통해서 event, id, class, style 등등  한번에 다 넣을 수 있다.
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div> <!--render시 2nd params로 사용-->
  </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 h3 = React.createElement( "h3", null, "hello, i am span content!" );
    const btn = React.createElement("button", {
    // property에 event가 존재. addEventListener, innerText같은 걸 다 생략하게 할수 있다.
      onClick: () => console.log("mouse enter"),
    }, 
    "Click me - content");

    const container = React.createElement("div", null, [h3, btn]) // 배열로 위의 2개 변수 넣음
    ReactDOM.render(container, root);
  </script>
</html>

 

4. JSX - 1. createElement 바꾸기

  • JavaScript를 확장한 문법

  • createElement같은걸 html과 유사한 문법으로 변경해서 쉽게 코드를 작성하도록 하는 것

  • babel : jsx 문법을 old JS 문법으로 변경 : 이래야지 browser가 읽을 수 있게 된다.
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  • react 는 변수명을 작성할 때 첫글자를 대문자로 작성 -> component를 내부에 넣을 때 대문자로 해야지 실제 html tag와 구분이 된다

  • Title
<!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>
  <!--babel : jsx 문법을 old JS 문법으로 변경 : 이래야지 browser가 읽을 수 있게 된다.-->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  <script type="text/babel">
    const root = document.getElementById("root");
    
    // const Title = React.createElement(
    //      "h3", 
    //      {
    //        id: "title",
    //        onMouseEnter: ()=> console.log("mouse enter")
    //      },
    //      "hello, i am span content!" 
    //    );
    
    // createElement 대시 jsx 사용한 code
    const Title = () => (
      <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
        "hello, i am span content!"
      </h3>
    );
...
  </script>
</html>

 

  • button
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div> <!--render시 2nd params로 사용-->
  </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>
  <!--babel : jsx 문법을 old JS 문법으로 변경 : 이래야지 browser가 읽을 수 있게 된다.-->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  <script type="text/babel">
    const root = document.getElementById("root");
    ...
    
    const Button = ()=>(
    <button style={
    backgroundColor:"blue",
    }
    onClick={()=>console.log("mouse enter")}
    >
     Click me - content
    </button>
    );
    
    //const btn = React.createElement("button", {
    // property에 event가 존재. addEventListener, innerText같은 걸 다 생략하게 할수 있다.
    //  onClick: () => console.log("mouse enter"),
    //}, 
    //"Click me - content");
   ...
  </script>
</html>

 

5. JSX - 2. render 바꾸기

 

  • 먼저 특징을 가진 함수를 function으로 변경한 후 작성하기
  • 내가 만든 function 하나하나가 component이다.
  • component를 재사용시, <ComponentName/>으로 작성한다. -> 이렇기 때문에 html tag와 헷갈리지 않도록 대문자를 사용한다.

 

  • component 생성 방법 2가지
    1. function Title() { return () } ;
    2. const Title = () => () ;

 

  • 참고
    • () => () // 반환 값이 존재하지 않는 경우 사용
    • () => {return} // 반환 값이 존재하는 경우 사용
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <!-- 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 src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  <script type="text/babel">
    const root = document.getElementById("root");
    // component1
    const Title = () => (
      <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
        "hello guys"
      </h3>
    );

    // component2
    const Button = () => (
      <button onClick={() => console.log("clicked")} style={{ color: "red" }}>
        click
      </button>
    );
    // element 넣을 때 img 넣듯이 넣음
    const Container = () => (
      <div>
        <Title />  // component를 다른 component에 넣는 jsx 방법
        <Button /> // component를 다른 component에 넣는 jsx 방법
      </div>
    );
    ReactDOM.render(<Container />, root);
  </script>
</html>

 

 

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

'framework/react'의 다른글

  • 현재글1. The basic of React

관련글

티스토리툴바