JSX

JSX 와 HTML 의 차이점
1. 태그 특성은 낙타 표기법
  
  (예) <input type=”text” maxlength=”30”/> HTML
  
  return <input type=”text” maxLength=”30”/> JSX 낙타표기법
2. 모든 요소는 짝이 맞아야 한다
3. 특성 이름이 HTML 언어 사양이 아닌 DOM API 에 기반을 둔다
App.js

index.js

root.render(
  <React.StrictMode>
    <App />  //app.js 파일
  </React.StrictMode>
);

App.js

export default App;   //export가 되어있어야 다른 파일에서 import 가능

import logo from "./logo.svg";
<img src={logo} className="App-logo" alt="logo" />

css는 App.css 파일
index.html에서 부트스트랩 사용 가능

src → components 폴더 생성 → FirstApp.js

import React from "react";

const FirstApp = () => {
  return (
    <div>
      <h2 className="alert alert-info">First App Component!!!</h2>
    </div>
  );
};

export default FirstApp;

index.js

import FirstApp from "./components/FirstApp";

root.render(
  <React.StrictMode>
    <FirstApp />
  </React.StrictMode>
);

css 적용

FirstApp.js

import React from "react";
import "./MyStyle.css";  //css 파일 import

const FirstApp = () => {
  return (
    <div>
      <h2 className="line">First App Component!!!</h2>
			//직접 입력
      <div style={{ fontSize: "25px", color: "green", marginLeft: "100px" }}>
        하이요? 반가워용
      </div>
    </div>
  );
};

export default FirstApp;

MyStyle.css

h2.line {
  width: 500px;
  font-family: "Gaegu";
  border: 5px solid gold;
  text-align: center;
}

모든 변수는 return문 위에

secondApp

import React from "react";
import img01 from "../image/도리.png";
import img02 from "../image/라비.png";

function SecondApp(props) {
  //스타일 변수 지정
  const styleImg1 = {
    width: "200px",
    border: "5px solid green",
    borderRadius: "30px",
    marginLeft: "100px",
    marginTop: "50px",
  };

  let helloElement = <h1>Hello~ Element~</h1>;

  return (
    <div>
      <h2 className="alert alert-danger">SecondApp</h2>
      <div>
        이미지 연습: src영역은 반드시 import, public 영역은 직접 호출 가능
      </div>
      <img
        src={img01}
        style={{
          width: "200px",
          border: "3px solid pink",
          borderRadius: "50px",
          marginLeft: "20px",
        }}
      />

      <h3>public 영역 이미지</h3>
      <img style={styleImg1} src="../최고심1.jpg" />

      {helloElement}
      {helloElement}
    </div>
  );
}

export default SecondApp;

상태관리 변수

import React, { useState } from "react";

function ThirdApp(props) {
  //상태관리를 위한 변수설정
  const [message, setMessage] = useState("☆ Happy Day ☆");

	//이벤트 함수 변수
  const handlerEnterEvent = (e) => {
    if (e.key == "Enter") {
      setMessage("");
      e.target.value = "";
    }
  };

  return (
    <div>
      <h2 className="alert alert-warning">ThirdApp</h2>
      <h3 style={{ color: "orange" }}>{message}</h3>
      <hr />

      <h4>메세지를 입력해주세요.</h4>
      <input
        type="text"
        style={{ width: "300px", fontSize: "2em" }}
        defaultValue={message}
        
				//이벤트 직접
				onChange={(e) => {
          setMessage(e.target.value);
        }}
				
				//이벤트 호출
				onKeyUp={handlerEnterEvent}
      />
    </div>
  );
}

export default ThirdApp;