[React] SPA(Single Page Application) &MPA(Multi Page Application) 🎬JSX

🐾 리액트 동작원리

html 파일이 오로지 한개만 존재한다.
리액트로 만든 웹사이트는 페이지가 하나만 존재한다. SPA (Single Page Application)
(페이스북, 인스타그램, ...)

🐾 SPA (Single Page Application) vs MPA (Multi Page Application)

SPA 는 한개의 페이지로만 만들어져있는 앱 혹은 웹을 의미한다.
MPA 는 여러개의 페이지(html 파일이 여러개)로 만들어져있는 앱 혹은 웹을 의미한다.
하나하나 불러다가 만들어줘야한다는 불편한점..

react 프로젝트에 있는 index.html 에서 root div를 찾아 온다음에 그 속에다가 그려주는 행위를 하는 파일 : index.js

❗️SPA의 단점은 무엇일까?

속도!
그래서, 생각한게,,,?
리액트 에서,
바뀌는 "부분"만 지웠다가 그려주면 되지 않을까??? 라는 생각을한다.

물리적 DOM과 동일한 가상 DOM을 만들고,
변해야 하는 부분이 있다면, 변하기 전의 가상 DOM 구조와 변한후의 가상 DOM 구조를 비교하여
변한 부분만 물리적 DOM에 반영하도록 코드를 짜놓아서 "속도를 향상"시키는 방법을 사용한다

index.js 안에있는
ReactDOM.createRoot(물리적인DOM태그)
👉👉 물리적 DOM태그를 루트(뿌리)로 하는 가상의 DOM 태그를 만들어줘

render(태그)
👉👉 가상 DOM 태그 안에 자식으로 특정 태그를 추가해줘

* 17version 은 render 함수 안쓰고 hydrate 함수를 쓴다(논리는같음)
그래서 회사에서는 16version이나 18version사용.

Document Object Model

모든 태그들은 객체이다

🐾 JavaScript xml(JSX)

XML(eXtensible Markup Language)
Markup Language : <> 로 이루어진 언어

예를들어,

*정보전달* 
  사람이있는데, 이름은 강수지고,
  나이는 15살이고 학교는 다람쥐중학교
  사람이있는데, 이름은 홍길동이고,
  나이는 20살이고 학교는 다람쥐대학교
  사람이있는데, 이름은 김철수있고,
  나이는 30살이고 

과거 :

사람강수지15다람쥐중학교사람홍길동15다람쥐중학교

* 아직도 금융권에서는 이렇게 쓴다, 속도가 빠르기 때문에

xml

<사람 이름="강수지" 나이="15" 학교="다람쥐중학교">
<사람 이름="홍길동" 나이="20" 학교="다람쥐대학교">
<사람 이름="김철수" 나이="30" 학교="다람쥐중학교">

jsx 는 자바스크립트로 구현한 XML

자바스크립트로 XML을 구현하기 위해서는
함수로 구현

function 사람 (이름, age, 학교){

}
사람('강수지', 15, '다람쥐중학교');

👉👉 <사람='강수지' age=15 학교="다람쥐중학교">

파일 확장자를 .jsx --> 현재는 .js로 써도 알아서 해석해줌
(* 타입스크립트는 아직 구분 필요)

🐾 React.StrictMode

<React.StrictMode></React.StrictMode>

엄격검사모드, 최초로 그린 후 다시 지웠다가 그리는 과정을 실행하여 두번 그렸을떄도 이상이 없는지 확인하기 위한 용도

👉 명령어는 pacakge.json file에 scripts에서 설정가능

명령어를 aaa로 바꾼다면?

실직적으로, react-scripts start가 실행된다.
하지만 aaa라는 명령어가 이미 있을수있다. 별명이 aaa인것이고, 앞에 npm 중 명령어별명 aaa를 써줘야한다.
"npm aaa" 이런식으로.
npm은 뭐였지?? node.js 설치할떄 패키지. 같이 설치되는 프로그램 관리자
npm 없었더라면? 일일이 react-scripts start를 쳐줘야한다.

jsx 중 기존 html 태그 이름과 똑같은 이름으로 만들어져있는 태그들이 있다
👉👉해석할떄 html태그와 동일하게 해석! 만들때 몇가지 차이점 있음!
html 에는 없는 속성을 써도 된다.

html

<h1 onclick="f()" aaa="강수지" id="title" class="important">안녕하세요</h1>

jsx
🐾 차이점??
📍1.**class**로 설정하고 싶은 대상은**className**에 값을 넘겨줘야한다
📍2. **이벤트** - 카멜표기법(대문자)로 바뀐것, 함수를 실행하는것이 아닌, 함수자체를 넘겨줘야한다.

 <h1 onClick=f aaa="강수지" id="title" className="important">안녕하세요</h1>
--> h1(aaa="강수지,id="title", className="important", children="안녕");
    내부적인 함수의 코드를 거쳐서
    결과로 나오는것은 
    <h1 id="title" class="important" onclick="f()">안녕</h1>
    -->이러한 html태그객체가 결과로 나오게 되어있음

🐾 jsx 중에서 html태그와 똑같은 이름이 아닌 태그

:👉 컴포넌트
📍 1. 컴포넌트는 반드시 대문자로 시작해야한다.
컴포넌트도 어쨋든 jsx이기 때문에 함수로 만들어진다.
(과거에는 클래스로 만들었음) --> (권장 안함) -->현재,함수로 만들게 발전함.

d01MyComponent.js

//나만의 컴포넌트
function a(){
    return "강수지";
}
function Su() {
    return (
        <>
        <h1>강수지 컴포넌트</h1>
        <p>내가 처음으로 만든 나만의 xml, 즉 리액트 컴포넌트입니다.</p>
        </>
    );
}


export default Su;

App.js

import logo from './logo.svg';
import './App.css';
import Su from './day01/d01MyComponent';

function App() {
  return (
  <Su/>
  );
}

export default App;

📍 2. return 될 떄 한개만 return되어야 한다 (묶여서)
보통은 div로 묶어서 return을 하는데,
이 div가 정말 의미없이 묶어주기 위해서만 사용한다면 불필요하기 때문에
그럴 경우에는 fragment <></> 비어있는 태그를 사용하여 묶어줄수 있다.
👉 자바스크립트에서는 두 개 이상을 리턴할 수 없기 때문에 우리는 요소들을 하나의 태그로 감싸거나 의미없는 태그의 사용을 피하기 위해 React Fragment를 사용하는 것.

<Fragment> </Fragment> 대신 <> </> 이렇게 써도 된다.

📍 3.내용이 없는 jsx 는 어떻게 표기?

html    -->   jsx
<img>         <img/>
<input>       <input/>
<p>안녕</p>    <p>안녕</p>
              <Su>안녕</Su>
<p></p>       <p/> or <p></p>
              <Su />

📍 4. jsx로 해석해야하는 경우와 js로 해석해야하는 경우는 어떻게 구분할까?
<>의 시작과 끝을 기준으로 jsx로 해석, 그외는 javascript로 해석,
jsx 안쪽에서 javascript 명령어로 해석해야하는 경우는 ??
{} 를 통해 알려준다
{} 안쪽은 js로 해석.

✏️ 주석도 마찬가지의 의미로
{/주석/}
하면 자바스크립트로 해석 되어도 주석이니 주석으로 사용된다

App.js

function a(){
   return "강수지";
}
a(); //강수지 출력
function Su(){
return(
   <div>a()</div>    //강수지 출력
);
}

jsx 버전, d01MyComponent.js

// 나만의 컴포넌트 
function a(){
  return "강수지";
}

function Su(){
  // 이곳을 주석
  
  return (
    <>
      {/*주석*/}
      <h1>{a()} 컴포넌트</h1>
      <p className={a()}>내가 처음으로 만든 나만의 xml, 즉 리액트 컴포넌트입니다</p>
      <p>{a()}</p>
    </>
  );
}

export default Su;