React 실행 흐름 이해 - JSX 문법

1️⃣ 실행과정 (index.html) - SPA

🔎 SPA (Single Page Application)
: 단일 페이지로 구성된 웹 애플리케이션
- 렌더링의 역할을 서버에 넘기지 않고 브라우저에서 처리하는 방식
- 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운로드 하고, 이후 새로운 페이지 요청 시 페이지 갱신에 필요한 데이터만을 전달 받아 페이지를 갱신함- a태그를 적을 수 없어서 a태그의 대체가 필요함

 

• package.json :  프로젝트 설정파일(json 형식으로 되어있음)
• "start":"react-scripts start"  :  index.js 파일을 실행함

 

 

2️⃣ JSX 란? 

index.js의 <App />을 ctrl+클릭하면 App.js파일이 나옴  == App.js를 그리는 것!

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

document.getElementById('root') = document.querySelector('#root')  :  index.html 파일에서 root라는 id를 찾음

<div id="root"></div>

➡ 여기에 App.js의 그림을 넣는 것

※ 결국, 열리는 파일은 index.html

 

⭐현재 App.js 자바스크립트 파일에 html 코드가 들어가있는데, 이를 JSX문법이라고 한다.

🔎 JSX 문법
- HTML과 유사한 구조를 갖고 있어 직관적이고 사용하기 편함
- 자바스크립트에 HTML을 넣는 것 ==> 자바스크립트 파일만 관리하면 됨!

 

 

3️⃣ JSX 기본 문법 

① 리액트는 무조건 하나의 태그(Dom)만 return 해준다.

import logo from './logo.svg';
import './App.css';

function App() {
  return <div>
    안녕222
    </div>
    <h1>해딩태그</h1>;
}

export default App;

return에 태그를 2개 이상 적게 되면 오류 발생  == return이 안됨

➡ 하나의 태그 안에 넣어주면 됨!

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div>
      <div>안녕</div>
      <h1>해당태그</h1>
    </div>
  );
}

export default App;

 

② 변수 선언은 let 혹은 const로만 해야 한다.

import logo from './logo.svg';
import './App.css';

let a = 10;

function App() {
  let b = 20;
  return (
    <div>
      <div>안녕</div>
      <h1>해당태그</h1>
    </div>
  );
}

export default App;

모든 것이 1급 객체이기 때문에, 변수의 위치는 상관이 없음

import logo from './logo.svg';
import './App.css';

let a = 10; //변수
const b = 20; //상수

function App() {
  let b = 20;

  return (
    <div>
      <div>안녕{a}</div>
      <h1>해당태그{b}</h1>
    </div>
  );
}

export default App;

자바스크립트의 변수를 return 내부에 넣으려면 {변수명}의 형식으로 넣어야 함!

 

 

③ if 사용 불가능 ➡ 삼항연산자 사용⭐

🔎 삼항연산자
( 조건 ? 값(true) : 값(false) )

return (
    <div>
      <div>안녕{a === 10 ? '10입니다.' : '10이 아닙니다.'}</div>
      <h1>해당태그{b}</h1>
    </div>
  );

== :  값 검사 /  === :  값과 타입 검사

※ 홑따옴표 혹은 쌍따옴표를 넣어주어야 변수로 인식하지 않음

 

 

④ 조건부 렌더링

: 있으면 보여주고 없으면 안보여줌 (= false가 없음)

🔎 조건부 렌더링
( 조건 && 값(true) )

<h1>해당태그{b === 20 && '20입니다.'}</h1>

 

 

⑤ 변수를 선언만 하는 것 = undefined

function App() {
  let c;
  console.log(1, c);

 

 

⑥ CSS 디자인

🔎 CSS 디자인하는 방법
1. 내부에 작성
2. 외부 파일에 작성
3. 라이브러리 사용 (ex. 부트스트랩, component-styled )

 

- 내부에 작성

function App() {
  const mystyle = {
    color: 'red',
  };

  return (
    <div>
      <div style={mystyle}>안녕{a === 10 ? '10입니다.' : '10이 아닙니다.'}</div>
      <h1>해당태그{b === 20 && '20입니다.'}</h1>
    </div>
  );
}

※ 위 방법은 추천하지 않음!

 

 

- 외부에 작성⭐

App.css

.box-style{
  color:blue;
}

App.js

return (
    <div>
      <h1 className="box-style">해당태그{b === 20 && '20입니다.'}</h1>
    </div>
  );