리액트. React 겉햝기 시작

웹 페이지는 특유의 깜빡거림이 존재하는데 모바일 앱들은 보통 부드럽고 빠르게 동작한다.
리액트는 모바일 앱 동작과 같은 웹을 만들 수 있고, 고품질의 웹, 복잡한 UI를 가진 앱도 깔끔하게 제작이 가능하다.
물론 모바일 앱도 제작 가능하다.

JS 라이브러리 중 하나. 사용자 인터페이스를 만들기 위해 사용됨.

react 자습서 참고.

console.clear();

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

const App = () => {
  //jsx (js안에서 html 작성가능.)
  return (
    <div>
      안녕
      <nav>하세요</nav>
    </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 Name = () => {
  return <div>Name!</div>;
};
const Hello = () => {
  return <div>Hello!</div>;
};

const App = () => {
  //jsx (js안에서 html 작성가능.)
  return (
    <div>
      <Name />
      {}
      <Hello />
      {}
      <Name />
      {}
    </div>
  );
};

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

함수 생성 그리고 불러내기

const Square = () => {
  return (
    <section
      style={{
        width: "200px",
        height: "200px",
        backgroundColor: "red",
        display : "flex",
        justifyContent: "center",
        alignItems : "center"
      }}
    >
      정사각형!
    </section>
  );
};

const Cricle = () => {
  return (
    <section
      style={{
        width: "200px",
        height: "200px",
        borderRadius: "50%",
        backgroundColor: "green",
        display : "flex",
        justifyContent: "center",
        alignItems : "center"
      }}
    >
      원!
    </section>
  );
};

const App = () => {
  //jsx (js안에서 html 작성가능.)
  return (
    <div>
      <Square />
      {}
      <Cricle />
      {}
    </div>
  );
};

같은 개념.

화면 상 보이는 것

const Square = () => {
  const style = {
        width: "200px",
        height: "200px",
        backgroundColor: "red",
        display : "flex",
        justifyContent: "center",
        alignItems : "center"
      }
  return (
    <section
      style={style}
    >
      정사각형!
    </section>
  );
};

const Cricle = () => {
  const style = {
        width: "200px",
        height: "200px",
        borderRadius: "50%",
        backgroundColor: "green",
        display : "flex",
        justifyContent: "center",
        alignItems : "center"
      }
  return (
    <section
      style={style}
    >
      원!
    </section>
  );
};

const App = () => {
  //jsx (js안에서 html 작성가능.)
  return (
    <div>
      <Square />
      {}
      <Cricle />
      {}
    </div>
  );
};

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

결과는 같은데 style을 변수로 빼는 것도 가능 style={style} 중괄호 안이 변수명.

const Square = () => {
  return (
    <section className="square">
      정사각형!
    </section>
  );
};

const Cricle = () => {

  return (
    <section className="cricle">
      원!
    </section>
  );
};

.square {
  width: 200px;
  height: 200px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cricle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: green;
  display: flex;
  justify-content: center;
  align-items: center;
}

마찬가지로 결과는 같은데 클래스로 부여해주는 방식.