[React]리액트를 다루는 기술-2. JSX

chaaerim·2021년 11월 11일

React

리액트를 다루는 기술

목록 보기

2/6

오늘은 JSX를 배우고 활용해보자!

📖 JSX

2.1. 코드 이해하기

✍ example

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

import 구문은 다른 파일을 불러와 사용할 때 활용됨.
브라우저에서 모듈을 불러와 사용하기 위해 번들러(bundler) 를 사용.
대표적인 번들러로는 웹팩, Parcel 등이 있으며 리엑트 프로젝트에서는 주로 웹팩을 사용.
웹팩을 사용하면 웹팩의 로더(loader) 를 이용하여 SVG파일과 CSS파일도 불러올 수 있음.

✍ example

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

function App() {
  const name='리액트';
  return (
    <div>
      <h1> {name} 안녕!</h1>
      <h2>잘 작동하니? </h2>
    </div>
       
  );
}

export default App;

funtion 키워드를 사용하여 컴포넌트를 만들 수 있음.
함수에서 반환하는 내용은 HTML같이 보이지만 아님! 이를 바로 JSX라고 부름

2.2. JSX란?

JSX는 자바스크립트의 확장문법이며 XML과 매우 비슷하게 생겼다. 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

2.3. JSX의 장점

보기 쉽고 익숙하다. -HTML 코드를 작성하는 것과 비슷하기 때문.
활용도가 높다. -JSX에서는 우리가 알고 있는 div나 span 같은 태그를 사용할 수 있을 뿐만 아니라 컴포넌트도 작성 가능.

2.4. JSX 문법

2.4.1. 감싸인 요소

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

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

function App() {
  return (
    <div>
      <h1>리액트 안녕!</h1>
      <h2>잘 작동하니? </h2>
    </div>
       
  );
}

export default App;

Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있음.

✔ 결과 확인

-div를 사용하고 싶지 않다면 Fragment를 사용할 수 있다.
✍ example

import {Fragment} from 'react';
import './App.css';

function App() {
  return (
    <>
      <h1>리액트 안녕!</h1>
      <h2>잘 작동하니? </h2>
    </>
       
  );
}

export default App;

Fragment 는 위와 같은 형태로도 표현할 수 있다.

2.4.2. 자바스크립트 표현

JSX안에는 자바스크립트 표현식을 쓸 수 있다.
✍ example

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

function App() {
  const name='리액트';
  return (
    <div>
      <h1> {name} 안녕!</h1>
      <h2>잘 작동하니? </h2>
    </div>
       
  );
}

export default App;

자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 {}로 감싸면 됨.

2.4.3. If문 대신 조건부 연산자

JSX 내부의 자바스크립트 표현식에서 if문을 사용할 수 없다.
✍ example

import {Fragment} from 'react';
import './App.css';

function App() {
  const name='리액트';
  return (
    <>
      {name=== '리액트'? 
      (<h1>리액트 안녕!</h1>):
      (<h2>리액트가 아닙니다.</h2>)}
    </>
       
  );
}

export default App;

if문 대신 조건부 연산자 즉, 삼항 연산자 를 사용.

✔ 결과 확인

2.4.4. AND 연산자(&&)를 사용한 조건부 렌더링

✍ example

import {Fragment} from 'react';
import './App.css';

function App() {
  const name='뤼액트';
  return (
    <>
      {name=== '리액트' && <h1>리액트 안녕!</h1>}
    </>
       
  );
}

export default App;

&&연산자로 조건부 렌더링이 가능한 이유는 리액트에서 false를 렌더링 할 때는 null과 마찬가지로 아무것도 나타내지 않기 때문.

✔ 결과 확인

2.4.5. undefined를 렌더링하지 않기

리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링 하는 상황을 만들면 안된다.

✍ example

import {Fragment} from 'react';
import './App.css';

function App() {
  const name='undefined';
  return name || '값이 undefined입니다. ';
}

export default App;

해당 값이 undefined일 때 OR(||) 연산자를 사용하면 사용할 값을 지정할 수 있음.

JSX 내부에서 undefined를 렌더링 하는 것은 괜찮다 !!!

2.4.6. 인라인 스타일링

리액트에서 DOM 요소에 스타일을 적용할 때에는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어주어야 한다.
따라서 - 문자를 사용하지 않고 카멜 표기법으로 작성한다.
예를 들어 background-color 대신 backgroundColor로 작성!

2.4.7. class대신 className

JSX에서는 클래스를 사용할 때 class가 아닌 className으로 지정해주어야 한다.

2.4.8. 꼭 닫아야 하는 태그

HTML 코드를 작성할 때 가끔 태그를 닫지 않은 상태로 코드를 작성하기도 한다. 예를들어 <input>이라고만 입력해도 작동이 가능하다.
그러나 JSX에서는 </input>처럼 닫는 태가그 없으면 오류가 발생한다.

2.4.9. 주석

JSX 내부에서 주석을 작성할 때에는 {/*...*/}와 같은 형식으로 작성.
✍ example

import {Fragment} from 'react';
import './App.css';

function App() {
  const name='리액트';
  return(
    <>
    {/* 주석은 이렇게 작성합니다. */}
    {name}
    //하지만 이런 주석이나 
    /*이런 주석은 페이지에 그대로 나타나게 된다. */
    </>
  )
}

export default App;