Create React App & JSX

Why React?

• React는 컴포넌트 기반의 UI 라이브러리
  공통으로 사용되는 HTML 요소를 컴포넌트로 만들면 수정하고 재사용하기 쉬워짐
• 선언형 프로그래밍 : 절차를 하나하나 설명하는 명령형 프로그래밍이 아닌 결론을 바로 알 수 있도록 코드를 작성하는 방법
• Virtual DOM을 사용
  DOM : 문서 객체 모델. 브라우저가 HTML을 해석해서 화면에 보여줄 때 쉽게 해석하기 위해 트리 형태로 변형시킨 객체.
  *Javascript는 이러한 DOM을 통해 HTML로 짜여진 요소들을 생성 및 변형하고 삭제할 수 있음.
  일반 JS만 사용한 브라우저는 화면의 요소가 변경될 때마다 렌더링의 모든 과정을 거쳐서 페이지를 불러와야함
  React는 현재 가상 돔과 새 가상돔을 비교해서 변화하는 부분을 수정하고 모든 수정이 끝나면 일괄로 합쳐서 실제 돔에서 업데이트 할 수 있도록 던져줌
  변환된 DOM이 표시되는 과정?

---

📌 React를 도와주는 라이브러리(패키지)들: Webpack, Babel
*Webpack: 모듈 번들러. 다수의 JS 파일을 하나의 파일로 합쳐주는 역할.
Babel: JS 컴파일러. JSX 등의 쉽고 직관적인 JS 문법을 사용할 수 있도록 도와주는 역할.

Create React App: React의 boiler plate.
*Bolier Plate: 이미 세팅 완료된 패키지. 프로그램을 만드는 데 필요한 패키지들을 모아놓은 패키지.

✍ Create React App을 통해 React app을 키고 꺼보자
1. terminal에 npx create-react-app reactexam1 입력
: 'reactexam1'이라는 프로젝트를 만들겠다.
설치 후
2. terminal에 npm start를 입력
localhost 주소로 react 창이 나타남
📌 내 컴퓨터가 서버 역할을 하는 것
3. terminal에서 ctrl+c 입력
일괄 작업을 끝내시겠습니까? 에서 y 입력

파일 : App.js

import './App.css';
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h2>hi react</h2>
      </header>
    </div>
  );
}
export default App;

• JSX : React에서 사용하는 문법. JS의 변수나 함수와 같은 값을 HTML에 쉽게 넣을 수 있음.

파일 : index.js

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

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

App.js에서 export default App;으로 내보내기 한 App 컴포넌트는
다른 파일에서 import App from './App';으로 받아올 수 있음 => ES module 시스템

---

📌 JSX 규칙

• 태그를 열었으면 /를 이용해서 꼭 닫아줘야함
  *Self-closing tag : <image /> 와 같이 열자마자 닫히는 태그들
• 컴포넌트를 만들 때 모든 태그들은 가장 바깥에 있는 하나의 최상위 태그로 감싸줘야함

  React.fragment로 최상위 태그 대체할 수 있음

  function App() {
    return (
  <React.Fragment>
  <MyHeader/>
        <header className="App-header">
          <h2>hi react</h2>
        </header>
  </React.Fragment>
    );
  }

*혹은 <> </>처럼 빈 태그도 사용 가능

---

✍ JSX와 CSS를 결합해서 스타일링 해보자

1. css 파일 import

import './App.css';

2. inline styling

function App() {

  const style = {
    App: {
      backgroundColor: "black",
      color: 'white',
    },
    h2 : {
      color: 'red',
    },
    bold_text : {
      color: 'green',
    },
  };
// 별도의 css 파일을 사용하지 않고 객체를 만들어서 inline으로 스타일 적용
  return (
<div style={style.App}>
<MyHeader/>
        <h2 style={style.h2}>hi react</h2>
<b style={style.bold_text} id="bold_text">React.js</b>
</div>
  );
}

---

📌 조건부 렌더링

function App() {
  const number = 5;
  return (
<div>
<MyHeader/>
<h2>hi react</h2>
<b id="bold_text">
{number}는 : {number % 2 === 0? '짝수' : '홀수'}
</b>
</div>
  );
}

• JSX에서 {}안에는 값이나 변수가 들어갈 수 있음(함수 포함)
• 위와 같이 현재 조건에 따라 렌더링 할 값이 달라질 때 삼항연산자는 React에서 사용하는 방법 중 하나

---

Studying...

https://inf.run/qAuJ
한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 by 이정환 Winterlood