[개발자되기: React로 mbti만들기] feat. 인프런

Kyoorim LEE·2022년 6월 9일
0

스스로TIL

목록 보기
1/34

html vs javaScript vs React vs JSX 작성방식 차이

html

<!DOCTYPE html>
<html lang="en">
  <body>
    <h1>hello html!</h1>
  </body>
</html> -->

JavaScript

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
    <script>
      const rootElement = document.getElementById("root");
      const element = document.createElement("h1");
      element.textContent = "Hello javaScript!";

      rootElement.appendChild(element);
    </script>
  </body>
</html>

React

<!DOCTYPE html>
<html lang="en">
  <body>
    <script
      src="https://unpkg.com/react@17/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
      crossorigin
    ></script>

    <div id="root"></div>
    <script>
      const rootElement = document.getElementById("root");
      const element = React.createElement("h1", {
        children: "Hello React!"
      });

      ReactDOM.render(element, rootElement);
    </script>
  </body>
</html>

JSX

<!DOCTYPE html>
<html lang="en">
  <body>
    <script
      src="https://unpkg.com/react@17/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

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

      const text = "Hello JSX!";
      const className = "title";

      const element = <h1 className={className}>{text}</h1>;
      ReactDOM.render(element, rootElement);
    </script>
  </body>
</html>

Virtual DOM

JSX

해당 divbutton이 동시에 업데이트 됨

<!DOCTYPE html>
<html lang="en">
  <body>
    <!--<script
      src="https://unpkg.com/react@17/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>-->

    <div id="root"></div>
    <script>
      const rootElement = document.getElementById("root");

      function draw() {
        const number = Math.floor(Math.random() * 9 + 1);
        const element = `
        <button>${number}</button>`;
        rootElement.innerHTML = element;
      }

      setInterval(draw, 1000); // 함수를 1초마다 호출함 -> 랜덤숫자가 1초마다 생성됨
    </script>
  </body>
</html> 

React

해당 button만 업데이트됨

<!DOCTYPE html>
<html lang="en">
  <body>
    <script
      src="https://unpkg.com/react@17/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

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

      function draw() {
        const number = Math.floor(Math.random() * 9 + 1);
        const element = (
          <React.Fragment>
            <button>{number}</button>
            <div>
              <p>{number}</p>
            </div>
          </React.Fragment>
        );
        ReactDOM.render(element, rootElement);
      }

      setInterval(draw, 1000); // 함수를 1초마다 호출함 -> 랜덤숫자가 1초마다 생성됨
    </script>
  </body>
</html>

Components & Props

// <생략>
<div id="root"></div>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

 	 {/* function Hello({ name }) {
         return <h1>Hello, Component {name}</h1>;
       }*/}

      const Hello = (data) => <h1>Hello, Component {data.name}</h1>;

      const element = <Hello name="component" />;

ReactDOM.render(element, rootElement);

이벤트 핸들링

<!-- React-->
<!DOCTYPE html>
<html lang="en">
  <body>
    <script
      crossorigin
      src="https://unpkg.com/react@17/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <div id="root"></div>
    <script type="text/babel">
      const rootElement = document.getElementById("root");
      // 공통되는 버튼의 재사용목적 컴포넌트
      const Button = ({ color, onClickButton }) => {
        // 버튼을 클릭했을 때 실행되는 함수
        const handleClickButton = (color) => {
          onClickButton(color);
        };

        return (
          <button
            onClick={() => handleClickButton(color)}
            style={{ backgroundColor: color }}
          >
            {color} button
          </button>
        );
      };

      function Buttons() {
        const [textColor, setTextColor] = React.useState("black");
        console.log("textColor", textColor);
        return (
          <>
            <Button color="pink" onClickButton={setTextColor} />
            <Button color="blue" onClickButton={setTextColor} />
            <Button color="green" onClickButton={setTextColor} />
          </>
        );
      }

      const element = <Buttons />;

      ReactDOM.render(Buttons(), rootElement);
    </script>
  </body>
</html>

hook & useEffect

<!-- React-->
<!DOCTYPE html>
<html lang="en">
  <body>
    <script
      crossorigin
      src="https://unpkg.com/react@17/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <div id="root"></div>
    <script type="text/babel">
      const rootElement = document.getElementById("root");
      // 공통되는 버튼의 재사용목적 컴포넌트
      const Button = ({
        color,
        onClickButton,
        changeTextColor,
        array,
        count,
        addCount
      }) => {
        // 버튼을 클릭했을 때 실행되는 함수
        const handleClickButton = (color) => {
          addCount(count + 1);
          changeTextColor(color);
          // 버튼을 클릭했을 때 array 배열에 텍스트 추가
          const newArray = array.concat({
            key: count,
            des: `Click ${color}button`
          });
          addNewArray(newArray);
        };

        React.useEffect(() => {}, [count]);

        return (
          <button
            onClick={() => handleClickButton(color)}
            style={{ backgroundColor: color }}
          >
            {color} button
          </button>
        );
      };

      function Buttons() {
        const [textColor, setTextColor] = React.useState("black");
        const [newState, setNewState] = React.useState([
          { key: 0, color: "pink" },
          { key: 1, color: "blue" },
          { key: 2, color: "green" }
        ]);
        const [array, setArray] = React.useState([]);
        const [count, setCount] = React.useState(0);
        return (
          <>
            {newState.map((button) => {
              return (
                <Button
                  key={button.key}
                  color={button.color}
                  changeTextColor={setTextColor}
                  addNewArray={setArray}
                  array={array}
                  addCount={setCount}
                  count={count}
                />
              );
            })}
            <h1 style={{ color: textColor }}>color</h1>
            {array.map((text, index) => {
              return <p key={index}>(desc)</p>;
            })}
          </>
        );
      }

      const element = <Buttons />;

      ReactDOM.render(Buttons(), rootElement);
    </script>
  </body>
</html>
profile
oneThing

0개의 댓글