React 리액트 설치하기 + 간단한 동작

https://nodejs.org/en

Node.js — Run JavaScript Everywhere

 

Node.js 설치하기

 

 

터미널 창에서 npm 입력후 알 수 없는 문자들이 나오면 install 완료

 

 

 

cmd에서 경로이동

 

 

npm init react-app my-app -> y

 

 

 

서버 실행코드를 입력하면, 이 창이 실행된다.

 

 

 

https://ko.react.dev/

React

 

 

 

접속하기

 

 

 

App.js에 들어오면 리액트 환경에서 작업할 수가 있다.

 

 

 

리액트는 SPA로 Single Page Application으로 작용하는데, 아래 index.html에 div root 항목에 그 페이지들이 inner html 형식으로 들어가게 된다.

 

 

 

index.js root에 App.js 내용을 넣겠다.

 

 

 

package.json을 살펴보면
start항목이 있는데 이것이 바로 index.js를 실행한다.
index.js를 살펴보면 ReactDOM.render 가 호출된다. 여기서 중요한 것은 <App/>이라는 것이 있다.(
이것이 바로 App.js를 호출한다. 그 안에 보면 function App()함수가 있고 이것이 JSX문법을 활용해야 하고
반환받은 결과를 document.getElementById('root') 위 문장 때문에 이것을 public/index.html문서를 열어 그 안에서 id='root'라고 명시된 요소를 찾아 넣고 결과로 보여준다. 

아래는 JSX 문법인데 이 문법을 html로 변환시켜주는 작업을 한 뒤에 결과값을 출력한다.

 

 

 

 

 

 

서버 종료시키기

 

 

 

cmd로 외부에서 React 서버를 구동했다면, VSCode에서도 터미널을 실행시킨뒤에, npm start를 누르면 실행이 된다.

 

 

 

문법 검사기 설치하기

 

 

 

 

 

 

 

 

 

 

 

 

설정 완료 후 VSCode 재시작

 

 

 

App.js에 해당 항목을 넣어준다. (Alt + Shift + F 사용시 자동정렬)

import logo from "./logo.svg";
import "./App.css";
import "./css/menu.css";

function App() {
  return (
    <div className="App">
      <div id="header">
        <ul id="nav">
          <li id="apple">&nbsp;</li>
          <li>Store</li>
          <li>Mac</li>
          <li>iPad</li>
          <li>iPhone</li>
          <li>Watch</li>
          <li>AirPods</li>
          <li>TV&amp;Home</li>
          <li>Only on Apple</li>
          <li>Accessories</li>
          <li>Support</li>
        </ul>
      </div>
    </div>
  );
}

export default App;

 

 

 

CSS 만들기

#header {
  height: 44px;
  margin: 0;
  background-color: #2e2e2e;
}
ul#nav {
  margin: 0;
  padding: 0;
  list-style: none;
  font: 14px Sans-serif;
  text-align: center;
  line-height: 44px;
}
ul#nav > li {
  display: inline;
  margin-right: 40px;
}
ul#nav > li {
  color: #eee;
  text-decoration: none;
}
ul#nav > li:hover {
  color: #e2e2e2;
}
#apple {
  background-image: url(../images/icon_apple.svg);
  width: 48px;
  position: absolute;
  top: 2px;
  background-size: 16px 44px;
  background-repeat: no-repeat;
  background-position: center center;
  margin-left: -50px;
  text-align: center;
  z-index: 1; /* 보는 시각의 인덱스값 숫자가 높으면 높을 수록 앞에 있다. */
}

 

 

 

 

 

 

 

      {/* 본문 JSX (JavaScript XML) 변수사용 {변수명}  */}
      <div id="content">{title}</div>

 

 

 

import logo from "./logo.svg";
import "./App.css";
import "./css/menu.css";

function App() {
  const title = "Global IT";
  const title_style = { color: "#f00", fontSize: "30px" };
  return (
    <div className="App">
      {/* 메뉴 */}

      <div id="header">
        <ul id="nav">
          {/* <li id="apple">&nbsp;</li> */}
          <li>Store</li>
          <li>Mac</li>
          <li>iPad</li>
          <li>iPhone</li>
          <li>Watch</li>
          <li>AirPods</li>
          <li>TV&amp;Home</li>
          <li>Only on Apple</li>
          <li>Accessories</li>
          <li>Support</li>
        </ul>
      </div>

      {/* 본문 JSX (JavaScript XML) 변수사용 {변수명}  */}
      <div id="content" style={{ color: "#f00", fontSize: "30px" }}>
        {title}
      </div>
      <div id="content" style={title_style}>
        {title}
      </div>
    </div>
  );
}

export default App;

 

 

 

 

 

 

 

[ 라우터 ]

 

 

리엑트에서 얘기하는 라우터는 웹 브라우저에서 URL이 변경될 때마다 해당 URL페이지를
해석하고 보여주는 일을 한다.

 

 

 

서버 정지 후

 

 

 

 

npm install react-router-dom@latest 입력후 라우터 설치

 

 

 

 

 

 

 

 

 

 

 

 

 

import logo from "./logo.svg";
import "./App.css";
import "./css/menu.css";
import { Link, Route, Routes } from "react-router-dom";
import Home from "./pages/Home";
import Store from "./pages/Store";

function App() {
  // const title = "Global IT";
  // const title_style = { color: "#f00", fontSize: "30px" };
  return (
    <div className="App">
      {/* 메뉴 */}

      <div id="header">
        <ul id="nav">
          {/* <li id="apple">&nbsp;</li> */}
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/store">Store</Link>
          </li>
          <li>Mac</li>
          <li>iPad</li>
          <li>iPhone</li>
          <li>Watch</li>
          <li>AirPods</li>
          <li>TV&amp;Home</li>
          <li>Only on Apple</li>
          <li>Accessories</li>
          <li>Support</li>
        </ul>
      </div>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/store" element={<Store />} />
      </Routes>

      {/* 본문 JSX (JavaScript XML) 변수사용 {변수명}  */}
      {/* <div id="content" style={{ color: "#f00", fontSize: "30px" }}>
        {title}
      </div>
      <div id="content" style={title_style}>
        {title}
      </div> */}
    </div>
  );
}

export default App;

 

 

 

import React from "react";

function Home() {
  return <div>Home 화면 입니다.</div>;
}

export default Home;

 

 

 

 

 

 

 

 

 

import React from "react";
// rsf 자동생성
function Mac(props) {
  //             유저         react library
  // jsx : Javascript XML -> HTML 변환 -> 화면에 배치

  return (
    // root tag는 무조건 하나만 존재해야 한다.
    <div>
      <p>Mac 화면입니다.</p>
    </div>
  );
}

export default Mac;

 

 

 

 

import React from "react";

import ipad_img from "../images/아이패드.jpg";

const IPad = () => {
  return (
    <div>
      <p>iPad 사진</p>
      <img src={ipad_img} alt="아이패드"></img>
    </div>
  );
};

export default IPad;