React | JSX 문법

🔷리액트를 다루는 기술 #5

 

 

🔵감싸인 요소

리액트 컴포넌트에서는 요소 여러개를 꼭 하나의 요소로 감싸주어야한다.

 

그 이유는 ?

VIrtual DOM에서 컴포넌트 변화를 감지할때, 효율적으로 비교할 수 있도록

컴포넌트 내부는 하나의 DOM 트리구조로 이루어져야한다는 규칙이 있기 때문이다.

 

리액트 v16이상은 <Fragment></Fragment> 기능을 사용하면 된다. 

import { Fragment } from 'react';

function App() {
  return (
    <Fragment>
      <h1>hi</h1>
      <h2>bye</h2>
    </Fragment>
  );
}

export default App;

 

동일하게 아래처럼도 사용 가능하다.

function App() {
  return (
    <>
      <h1>hi</h1>
      <h2>bye</h2>
    </>
  );
}

export default App;

 

 

🔵자바스크립트 표현

JSX 안에서는 {} 를 사용하여 자바스크립트 표현식을 쓸 수 있다.

import { Fragment } from 'react';

function App() {
  const fruit = 'apple'
  return (
    <Fragment>
      <h1>{fruit} hi</h1>
      <h2>bye</h2>
    </Fragment>
  );
}

export default App;

 

 

🔵조건부 연산자

조건부 연산자란 다른 이름으로는 삼항 연산자라고 부른다.

 

import { Fragment } from 'react';

function App() {
  const fruit = 'apple'
  return (
    <Fragment>
    {fruit === 'apple' ? (
      <h1>사과입니다.</h1>
    ) : <h2>사과가 아닙니다.</h2>}
      <h2>bye</h2>
    </Fragment>
  );
}

export default App;

 

 

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

 

특정 조건을 만족할 때 내용을 보여주고, 만족하지 않을 때 아예 아무것도 렌더링 하지 않도록 하고 싶을 때는!

 

function App() {
  const fruit = 'apple'
  return (
    <>
      {fruit === 'apple' ? <h1>사과입니다.</h1> : null}
    </>
  );
}

export default App;

 

 

[&& 연산사 사용]

function App() {
  const fruit = 'apple'
  return (
    <>
      {fruit === 'apple' && <h1>사과입니다.</h1>}
    </>
  );
}

export default App;

 

 

&& 연산자로 조건부 렌더링 할 수 있는 이유 ?

리액트에서 false 를 렌더링 할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문.

 

🔵 undefined 렌더링하지 않기

 

리액트 사용할 때 가장 많이 마주했던건

undefined 렌더링해서 오류생기는 거였다.. ;;

 

!!! 어떤 값이든 undefined 일 수도 있다면, OR(||) 연산자를 사용하면,

해당 값이 undefined 일 때 사용할 값을 지정할 수 있기에 간단하게 오류 방지 가능하다.

 

function App() {
  const fruit = undefined
  return (
    <>
      {fruit  ||  '값이 undefined입니다..'}
    </>
  );
}

export default App;

 

결과

 

값이 undefined 일 때 보여주고 싶은 값이나, 문구가 있다면

위 처럼 || 연산자를 사용하면된다 !!

 

 

 

🔵 className 사용하기

 

JSX 에서는 class가 아닌 className으로 사용해야한다.

 

[className 사용]

import './App.css';

function App() {
  const name = '리액트'
  return (
    <>
      <div className='react'>{name}</div>
    </>
  );
}

export default App;

.react{
  background: aqua;
  color: black;
  font-size: 48px;
  font-weight: bold;
  padding: 16px;
}

 

[결과]

 

[class 사용]

 

위와 동일하게 스타일이 적용되기는 하지만,

콘솔창에 아래와 같은 경고가 뜬다.

 

 

리액트 v16이상부터는 calss를 className으로 변환시켜 주고 경고를 띄운다.

 

 

🔵 ESLint , Prettier

 

ESLint : 문법 검사 도구

 

Prettier : 코드 스타일 자동 정리 도구

> Prettier는 스타일을 쉽게 커스터마이징 가능하다. 

> 루트디렉토리에서 .prettier라는 파일을 생성한 후 커스터마이징하면, 자동으로 적용이된다.