예습(react 기초)

오늘은 드물게 예습을 진행했다.

1.React에서 CSS class 속성을 지정하려면 "class"가 아닌 "className"으로 표기해야 합니다.
2.JSX에서 JavaScript를 쓰고자 한다면, 꼭 중괄호를 이용해야 합니다. 중괄호를 사용하지 않으면 일반 텍스트로 인식합니다.
3.React 엘리먼트가 JSX로 작성되면 "대문자"로 시작해야 합니다. 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식을 하게 됩니다. 이렇게 대문자로 작성된 JSX 컴포넌트를 따로 사용자 정의 컴포넌트라고 부릅니다.
4.조건부 렌더링은 if문이 아닌 삼항연산자를 이용해야 합니다.( (a===b) ? (do a) : (do b)
5.React 에서 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수를 사용합니다. map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야 합니다. "key" JSX 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시됩니다.
6.key 속성값이 반드시 id가 되어야 하며 없을 경우 최종 대안은 index입니다.
7.map을 사용할 경우 key를 제대로 사용하면 아래와 같은 형태를 띄게 된다.
function Blog() {
  const blogs = posts.map((post) => (
    <div key={post.id}>
      <h2>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  ));
  return <div className="post-wrapper">{blogs}</div>;
}
8. 랜덤출력은  return parseInt(Math.random() * length)을 이용하면 좋다.

9.리액트는 선언형, 컴포넌트 기반, 범용성이라는 특징을 가지고 있다.

10.React Router의 주요 컴포넌트는 크게 3가지로 나눌 수 있습니다. 라우터 역할을 하는 BrowserRouter, 경로를 매칭해주는 Routes 와 Route, 그리고 경로를 변경하는 역할을 하는 Link입니다.
사용을 위해서는 import{BrowserRouter, Routes, Route, Link} from "react-router-dom"을 사용해 수입해와야 합니다.

npm install react-router-dom@^6.3.0 (이건 아직 모르겠다..)로  설치 후
import React from "react";
import {BrowserRouter, Routes, Route, Link} from "react-router-dom";
export default function App() {
return (...)
} //대충 이런 느낌으로 사용하는 것 같다. 

11.router설치를 위한 파일 만드는 법
npx create-react-app simpleroute
cd simpleroute
npm start
npm install react-router-dom@^6.3.0
------후 App.js 상단에 아래의 두개를 추가한다.
import React from 'react'
import { BrowserRouter, Routes, Route, Link } from "react-router-dom"; 

 

 

아래 작성된 내용은 학습 내용을 수정해 로또번호 추출기(?)를 만든 사진과 route를 사용해 광장, 시장, 대장간을 만든 모습이다.]

1~45번 내용 중 랜덤함수를 이용해 1~45가 든 배열 내부에서 추출했으며 a,b,c,d,e,f로 각자 할당한 후 b는 a와 중복없을 경우 할당, c는 a,b와 중복없을 경우 할당 등 계속해서 반복 후 중간에 조건 달성 시 b,c,d,e,f등을 차례로 할당한 후 break로 루프에서 탈출한다.(사실 루프는 잘 안써봐서 그냥 i값을 0~10만정도로 잡았다(어차피 break가 걸려있기 때문에 저 값은 낮은게 아니라 높은 쪽으로는 의미가 없다.)

 

import logo from './logo.svg';

import './App.css';

import React from 'react'

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function App() {

return (

<BrowserRouter> {/* 라우터를 사용하기 위해서는 상위에 BrowserRouter를 만들어야 한다. */}

<div>

<nav>

<ul>

<li>

<Link to="/">Square</Link>{/* 광장으로 링크생성(초기페이지), 아래 두 Link또한 각가의 페이지 주소로 이동된다. */}

</li>

<li>

<Link to="/market">Market</Link>

</li>

<li>

<Link to="/blacksmith">Blacksmith</Link>

</li>

</ul>

</nav>

</div>

<Routes> {/* Routers는 Route의 부모로 필요하다. */}

<Route path="/" element={<Square />} /> {/* path에는 경로를 element에는 원하는 컴포넌트(또는 함수)를 넣어준다. */}

<Route path="/market" element={<Market />} />

<Route path="/blacksmith" element={<Blacksmith />} />

</Routes>

</BrowserRouter>

);

}

function Square() {

return [<h1>Square</h1>,<p>이곳은 광장입니다. 유저들과 대화할 수 있습니다.</p>]

//Square를 클릭 시 이곳으로 이동되며 초기 값(페이지)도 광장이다.

}

function Market() {

return [<h1>Market</h1>, <p>이곳은 시장입니다. 유저들과 거래를 하거나 상점에서 물건을 사고 팔 수 있습니다.</p>]

//메뉴 중 Market을 누를 경우 Route의 path로 인해 페이지의 주소는 /market으로 변경되고 Market의 내용이 출력된다.

}

function Blacksmith() {

return [<h1>Blacksmith</h1>, <p>이곳은 대장간입니다. 이곳에서 무기를 사고 팔거나 강화할 수 있습니다.</p>]

}

export default App;