본문 바로가기
TIL

[TIL-121] 노마드코더 ReactJS #1.0~#3.0

어포능이만두 2022. 2. 12. 00:02

#1 React 기초

* 구현사항 : <button> 태그를 클릭하면 클릭한 횟수를 보여주는 <h2> 태그

 

1. Vanilla Javascript ver.

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <h2>Total clicks: 0</h2>
    <button>Click me</button>
  </body>
  <script>
    const btn = document.querySelector("button");
    const h2 = document.querySelector("h2");

    let counter = 0;

    btn.addEventListener("click", () => {
      counter++;
      h2.innerText = `Total clicks: ${counter}`;
    });
  </script>
</html>
  • HTML에 태그들을 만들고, JS로 addEventListener를 붙여 동적인 상호작용을 구현함.

 

2. ReactJS ver.

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script>
    const root = document.querySelector("#root");
    const btn = React.createElement(
      "button",
      {
        id: "btn",
        onClick: () => console.log("i'm clicked"),
      },
      "Click me"
    );
    const title = React.createElement(
      "h2",
      {
        style: { color: "red" },
        onMouseEnter: () => console.log("mouse enter"),
      },
      "Total clicks: 0"
    );
    const container = React.createElement("div", null, [title, btn]);

    ReactDOM.render(container, root);
  </script>
</html>
  1. CDN 링크를 사용해서 임시로 React와 React-DOM을 import 함.
  2. 생성한 요소들이 들어갈 <div id="root"> 태그를 HTML <body> 안에 만듦.
  3. 자바스크립트 DOM으로 root <div> 태그를 가져옴.
  4. React.createElement()로 요소들을 생성함.
    • <button>과 <h2>, 그리고 이 두 요소들을 담을 컨테이너 <div>.
    • React.createElement("태그명", { properties }, 내용)
    • 내용을 담는 세 번째 인자에서 다른 요소를 받을 수도 있음. 자식 요소의 형태로 들어감. 여러 요소를 담을 땐 배열 형태로 씀.
  5. 생성한 <button> 태그의 property에 event listener를 부여함.
    • onClick : () => { } : 기존 이벤트명에 "on"을 붙이며, 화살표 함수로 실행할 코드 입력.
    • 브라우저가 react를 읽은 결과, html 태그의 속성은 <button id="btn" style="color: red;"></button> 이런 식으로 들어가 있지만 이벤트리스너는 알아서 포함되지 않음.
  6. React DOM으로 요소들을 render해서 root <div> 태그 안에 넣음.

 

 

3. JSX ver.

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const root = document.querySelector("#root");
    const Title = (
      <h2
        id="title"
        style={{ color: "red" }}
        onMouseEnter={() => console.log("mouse enter")}
      >
        Total clicks: 0
      </h2>
    );
    const Button = (
      <button id="btn" onClick={() => console.log("i'm clicked")}>
        Click me
      </button>
    );

    const container = React.createElement("div", null, [Title, Button]);
    ReactDOM.render(container, root);
  </script>
</html>
  • html과 비슷한 문법으로 요소를 만들 수 있어서 일반 ReactJS보다 훨씬 쉬움.
  • 브라우저가 JSX 문법을 이해하기 위해서는 바벨을 이용해야 함.
  • 반드시 요소를 생성하는 (함수의) 변수명을 대문자로 시작해야함.
  • ReactJS에서 태그의 속성을 객체의 형태로 {속성명: 값} 썼다면, 그냥 HTML 문법처럼 속성명=값으로 쓰면 됨.
    • 이벤트리스너도 마찬가지.
    • [의문] style={{ backgroundColor: "tomato" }} : 스타일은 중괄호를 2겹 감싸야함??
      • [2/14] 첫번째 중괄호는 자바스크립트 코드를 쓴다는 의미이고, 두번째 중괄호는 style을 객체로 넘겨주기 위함이다.

 

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const root = document.querySelector("#root");
    function Title() {
      return (
        <h2
          id="title"
          style={{ color: "red" }}
          onMouseEnter={() => console.log("mouse enter")}
        >
          Total clicks: 0
        </h2>
      );
    }
    const Button = () => (
      <button id="btn" onClick={() => console.log("i'm clicked")}>
        Click me
      </button>
    );

    const Container = () => (
      <div>
        <Title />
        <Button />
      </div>
    );
    ReactDOM.render(<Container />, root);
  </script>
</html>
  • JSX로 만든 태그들을 담을 컨테이너도 JSX 코드로 만들기 위해, 앞서 태그들을 만든 변수를 함수로 바꾸고 컨테이너 <div> 안에서 호출함.
    • JSX 문법에 따르면, Button()이 아니라 <Button /> 으로 씀. 그래서 꼭 대문자로 시작해야 하는 것. 소문자로 쓰면 일반 html 태그로 이해함.

 

 

#2 State

  • 컴포넌트 안에 변수를 포함시킬 땐 {변수명}으로 함.
저작자표시

'TIL' 카테고리의 다른 글

[TIL-123] 위코드 23일차: React Router & Sass  (0) 2022.02.15
[TIL-122] 위코드 22일차: ReactJS / 코드 카타  (0) 2022.02.14
[TIL-120] 위코드 19일차: 위스타그램 Wrap-Up / Javascript 테스트  (0) 2022.02.11
[TIL-119] 위코드 18일차: 위스타그램 - 메인 페이지  (0) 2022.02.10
[TIL-118] 위코드 17일차: 깃과 깃헙  (0) 2022.02.09

'TIL' Related Articles

티스토리툴바