[TIL] 20240509 - React, JSX 문법

React

---

React.js는 자바스크립트 라이브러리
싱글 페이지 어플리케이션 및 모바일 어플리케이션 개발 가능

🔎 리액트의 동작 원리

초기 랜더링 → 가상 DOM 변경 → 재조정 → 실제 DOM 업데이트

DOM(Document Object Model)

웹 페이지의 구조화된 내용을 표현하고 상호작용할 수 있는 방법을 제공하는 인터페이스

🔎 Create React App

npx create-react-app my-app
cd my-app
npm start

타입스크립트 기반 프로젝트 생성

npx create-react-app todolist --template typescript

JSX 문법

---

자바스크립트의 확장 문법으로, React 프로젝트를 개발할 때 사용

JSX code

function App() {
	return (
		<div>
			Hello <b>react</b>
		</div>
	);
}

JavaScript code

function App() {
	return React.createElement("div", null, "Hello ", 
   		React.createElement("b", null, "react"));

🔎 감싸인 요소

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 함

function App() {
  return (
    <h1>hello</h1>
    <h2>react</h2>
  );
}

→ error 발생

div나 fragment로 감싸주기

function App() {
  return (
    <div> // <Fragment> or <>
	  <h1>hello</h1>
      <h2>react</h2>
   	</div> // </Fragment> or </>
  );
}

🔎 CSS 클래스

일반 HTML에서 CSS 클래스를 사용할 때는 div class="css"</div>
→ JSX에서는 className으로 설정

App.js

import "./App.css';

function App() {
  const name = "react";
  return <div className="react">{name}</div>
}

App.css

.react {
  background-color: purple;
  color: white;
  font-size: 48px;
}

🔎 JavaScript 표현

JSX 안에서 JavaScript를 사용하려면 코드를 { }로 감싸줌

function App() {
  const name = 'react';
  return (
    <div>
      <h1>hello {name}</h1>
  );
}

🔎 조건부 연산자

JSX 내부의 자바스크립트 표현에서 조건에 따라 다른 내용을 렌더링하기 위해 사용

function App() {
  const name = "react";
  return (
    <div>
      {name === "react" ? (<h1>react ⭕️</h1>) : (<h1>react ❌</h1>)}
	</div>
  );
}

🔎 CSS - Inline

camelCase로 작성

function App() {
  const name = "react";
  const style = {
    backgroundColor: "black",
    color: 'white',
    fontSize: '48px'
  }
  
  return (
    <div style={style}>
    ...
}

🔎 닫는태그

function App() {
  const name = "react";
  return (
    <div>
      <input></input>
      <input /> // self-closing
    </div>
  );
}

🔎 주석

{/* 주석 */}