[React] JSX 문법 알아보기🧹

TATA·2023년 1월 20일
React
0

React

목록 보기
1/28

rafc : 컴포넌트 만들 때 유용한 단축키이다.

✔️ JSX = JavaScript XML

JSX란 React 스크립트 안에서 일반적인 HTML의 형태의
문법을 사용할 수 있도록 자바스크립트를 확장한 문법을 말한다.

JSX는 바로 실행할 수 있는 JavaScript 코드가 아니기에
Babel로 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일해주어야 한다.

function App() {
  const user = {
    firstName: "React",
    lastName: "JSX Activity"
  };

  function formatName(user) {
    return user.firstName + " " + user.lastName;
  }
  // JSX 없이 활용한 React
  return React.createElement("h1", null, `Hello, ${formatName(user)}!`);

  // JSX 를 활용한 React
  return <h1>Hello, {formatName(user)}!</h1>;
}

🧽 하나의 부모 요소

여러 엘리먼트를 작성하고자 하는 경우,
최상위에서 opening 태그와 closing 태그로 감싸줘야 한다.

Why?
React가 사용하는 Virtual DOM 방식에서는 컴포넌트 변화를 감지할 때 효율적으로 비교하고자
'컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야한다'라는 규칙이 있기 때문.

<div>
  <div>
    <h1>Hello</h1>
  </div>
  <div>
    <h2>TATA</h2>
  </div>
</div>

React.Fragment
<React.Fragment></React.Fragment>는 <></>와 동일하다.
다만, <></>로 단축해서 쓸 경우 key값을 설정할 수 없다.
이 태그를 사용하면 DOM에 의미없는 태그인 div태그를 사용하지 않고
여러 하위 노드들을 그룹화해서 사용할 수 있다.

<>
  <div>
    <h1>Hello</h1>
  </div>
  <div>
    <h2>TATA</h2>
  </div>
</>

🧽 클로징 태그와 셀프 클로징 태그

HTML에서 img나 br을 사용할 때 태그를 닫지 않는 경우가 있었지만,
React에서는 반드시 클로징 태그를 써주어야 한다.

<div className="picture"> 
  <img src = {./images} />
</div>

🧽 className 지정

React에서 CSS class를 지정하려면 className으로 작성해줘야 한다.
class로 작성할 경우 자바스크립트의 클래스로 인식한다.

<div className="greeting">Hello!</div>

🧽 JavaScript 표현식 { }

JSX에서 JavaScript를 쓰려면 중괄호 { } 를 써야 한다.
중괄호를 사용하지 않으면 일반 텍스트로 인식한다.

function App() {
  const name = 'tata';
  
  return (
    <div>
      Hello, {name}!
    </div>
  )
}

🧽 사용자 정의 컴포넌트는 대문자로 시작(PascalCase)

React 엘리먼트가 JSX로 작성되면 '대문자'로 시작(PascalCase)해야 한다.
(소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식하게 되기 때문.)

이렇게 대문자로 작성된 JSX 컴포넌트를 사용자 정의 컴포넌트라고 부른다.

function Hello() {
  return <div>Hello!</div>;
}

function HelloWorld() {
  return <Hello />;
}

🧽 if문 대신 삼항 연산자 사용

조건부 렌더링에는 if문이 아닌 삼항연산자를 사용해야 한다.
❗️참고) if문은 표현식이 아니기에 사용할 수 없다.

<div>
 {
   (12 + 30 === 42) ? (<p>정답</p>) : (<p>탈락</p>)
 }
</div>

🧽 map

React에서 여러 개의 HTML 엘리먼트를 표시할 때는 map() 함수를 사용한다.
map() 함수를 사용할 때는 반드시 'key' JSX 속성을 넣어야 한다.
'key' JSX 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시된다.

key 속성값은 가능하면 데이터에서 제공하는 id를 할당해야 한다.
(key 속성값은 id와 마찬가지로 변하지 않고, 예상 가능하며, 유일해야 하기 때문)
❗️참고) 배열 인덱스를 넣어서 해결할 수 있지만, 배열 인덱스는 최후의 수단으로만 사용해야한다.

const posts = [
  { id: 1, title: "Hello World", content: "Welcome to learning React!" },
  { id: 2, title: "Installation", content: "You can install React via npm." },
];

// 1. map 메서드를 변수로 추출한 방법
function Blog() {
  const postToElement = (post) => (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );

  const blogs = posts.map(postToElement);

  return <div className="post-wrapper">{blogs}</div>;
}

// 2. map 메서드를 return문 안에 인라인으로 처리한 방법
function Blog() {
  const blogs = posts.map((post) => (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  ));
  return <div className="post-wrapper">{blogs}</div>;
}

✔️ How to use React?

create React App을 사용하면 된다.
❗️참고) 리액트 SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인이다.
❗️참고) SPA란 Single Page Application의 약자로, 필요한 데이터 부분만 불러와서 업데이트 하는 방식으로 작동하는 웹 애플리케이션, 웹사이트를 말한다.

1️⃣ 작업할 폴더 터미널에 아래 코드를 입력

npx create-react-app <원하는폴더이름>

// 예시
npx create-react-app react-test

2️⃣ 설치한 폴더로 이동해서 실행하기

// 폴더로 이동
cd <폴더이름>
  
// 실행하기
npm run start // 또는 react-scripts-start

🧽 Math.random 활용 예시

새로고침할 때마다 8개 글자 중 하나가 랜덤으로 화면에 출력된다.

App.js

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

function App() {
  const proverbs = ["명언1", "명언2", "명언3", "명언4", "명언5", "명언6", "명언7", "명언8"];

  const getRandomIndex = (length) => {
    return parseInt(Math.random() * length);
  };

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          <code>src/App.js</code> 파일을 고치고 저장하면
        </p>
        {proverbs[getRandomIndex(proverbs.length)]}
      </header>
    </div>
  );
}

export default App;

🧽 특정 클래스의 색상만 바꾸는 예시

방법 1

gameInfo 중에 username이 tata인 경우를 찾아 새로운 변수에 넣는다.

const isTata = gameInfo.username === 'tata'

삼항연산자를 이용하여 gameInfo.username이
tata 일 때와 아닌 경우에 대한 className을 지정해 준다.

const gameUserNameClass = isTata ? 'gameInfo__username gameInfo__username--purple' : 'gameInfo__username'

클래스 이름으로 지정할 변수 gameUserNameClass를 중괄호 안에 넣어주면 된다.

<li className="gameInfo" key={gameInfo.id}>
   <span className={gameUserNameClass}>{gameInfo.username}</span>
</li>

방법 2

물론 변수에 저장해서 사용하지 않고 한 번에 쓸 수 있다.

<span className={gameInfo.username === "tata" ? "gameInfo__username gameInfo__username--purple" : "gameInfo__username"}>{gameInfo.username}</span>

👉 리액트 공식문서 보러가기

✔️ 기본적인 프레임워크 설치

Redux

(공식문서)Redux Toolkit Quick Start

npm install @reduxjs/toolkit react-redux

Styled Component

(공식문서)Styled Component Getting Started

npm install --save styled-components

ESlint, Prettier

npm install -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-prettier eslint-config-prettier
// 모듈 없다고 뜰 시 설치
npm install —save-dev prettier

.eslintrc.json .prettierrc.json 설정을 적용하는 것을 권장한다.

/* .eslintrc.json */
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:import/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "react/react-in-jsx-scope": 0,
    "react/jsx-uses-react": 0,
    "prettier/prettier": ["error", { "singleQuote": true }],
    "import/no-unresolved": "off"
  }
}
/* .prettierrc.json */
{
  "singleQuote": true
}

(ESLint, Prettier VSCode Extention도 설치해 주기)

profile
TATA
🌿 https://www.tatahyeonv.com
다음 포스트

[React] 📜SPA _Single Page Application

0개의 댓글