React - 개념, 새로운 태그 사용

• 사용이유
  • 웹 페이지는 이동시 특유의 깜빡거림이 있고, 모바일 앱은 이동 시 부드럽고 빠르다
  • 리액트는 모바일 앱 같은 웹을 만들 수 있음!
  • 고품질의 웹 사이트 제작 가능(깔끔하게)
  • 기업 입장에서는 비용 절감이 가능하다
• codepen을 이용한 react 사용

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

[HTML]

console.clear();

import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";

const App = () => {
	return <div>안녕</div>;
};

ReactDOM.render(<App />, document.getElementById("root")); // <App></App>으로 써도 됨

 

[JS] -> 기본코드

• 일반적인 형식) function App() {}  -> react 형식) const App = () => { return ""; } 
• ReactDOM.render(); : 생성해주는 애, 불러오는 애
• const App = () => {return <div>안녕</div>;}; 이렇게 만들어 주는걸 '컴포넌트화'라고 한다~

• JSX : React 문법, JS에서 HTML을 쓸 수 있게 하는 애!
• 형제의 태그가 존재하면 안된다! (자식은 괜찮음)

 

• 없는 태그 형식을 만드는 방법 (w3school - 태그 찾는 사이트 https://www.w3schools.com/)

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

console.clear();

import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";

const Hi = () => {
  return "Hi!"
};

const Hello = () => {
  return <div>Hello!</div>;
};

const App = () => {
  return (
    <div>
      <Hi /> {/* Hi! */}
      <Hello /> {/* Hello! */}
      <Hello />
      <Hi />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

• 없는 태그에 대한 함수를 만들어서 사용!

console.clear();

import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";

const Square = () => {
  return (
    <div
      style={{
        width: "200px" /*"key" : "value"*/,
        height: "200px",
        backgroundColor: "red",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        fontWeight: "bold",
        color: "white",
        marginTop: "10px"
      }}
    >
      정사각형!
    </div>
  );
};

const Circle = () => {
  const style = {
    borderRadius: "50%",
    width: "200px" /*"key" : "value"*/,
    height: "200px",
    backgroundColor: "gold",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontWeight: "bold",
    color: "white",
    marginTop: "10px"
  };

  return <div style={style}>원!</div>;
};

const App = () => {
  return (
    <div>
      <Circle />
      <Square />
      <Circle />
      <Square />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

• style = {{}} -> 여기서 중괄호는 객체(Object)를 뜻해, 여러개의 무언가를 담을 수 있는거지! ({}를 2개 써야하는데 그건 외워..)

console.clear();

import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";

const Square = () => {
  return (
    <div
      style={{
        width: "200px" /*"key" : "value"*/,
        height: "200px",
        backgroundColor: "red",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        fontWeight: "bold",
        color: "white",
        marginTop: "10px"
      }}
    >
      정사각형!
    </div>
  );
};

const Circle = () => {
  const style = {
    borderRadius: "50%",
    width: "200px" /*"key" : "value"*/,
    height: "200px",
    backgroundColor: "gold",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontWeight: "bold",
    color: "white",
    marginTop: "10px"
  };

  return <div style={style}>원!</div>;
};

const App = () => {
  return (
    <div>
      <Circle />
      <Square />
      <Circle />
      <Square />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

• const Circle = () => { const style = {}; retrun <div style = {style}></div>}로 설정하면 style이 적용되어 나타남!