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

Lynn·2021년 7월 15일
0

React

목록 보기
4/17
post-thumbnail

JSX란?

자바스크립트의 확장 문법
코드가 브라우저에서 실행되기 전에 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됨

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

//변환된 코드
function App() {
  return React.createElement("div", null, "Hello", React.createElement("b", null, "react"));
}

이처럼 JSX를 사용하면, HTML 코드를 작성하는 것과 비슷한 형태로 매우 편하게 UI를 렌더링할 수 있음을 알 수 있다!

JSX 문법

1. 감싸인 요소

li 태그 두 개를 넣었을 때 빨간 줄이 쫙 뜨던 것을 기억한다. 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 하기 때문이었다. 이걸 지켜야 하는 이유는 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.

div 태그, 또는 Fragment (<></>)로 감싸 주면 된다.

//Fragment 사용 예시
import React from 'react';

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

export default App;

2. 자바스크립트 표현

JSX 내에서는 코드를 {}로 감싸서 자바스크립트 표현식을 쓸 수 있다.

import React from 'react';

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

export default App;

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

JSX 내부 자바스크립트 표현식에서 if문을 사용할 수는 없다. {} 안에서 쓰다가 안 돼서 한참을 당황했던 기억이 있다...
삼항연산자로 if else문을 대신하거나, JSX 밖에서 if문을 사용하여 사전에 값을 설정해야 한다.

import React from 'react';

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

export default App;

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

조건부 연산자(삼항연산자) 말고도 간단하게 &&를 사용한 조건부 렌더링이 가능하다. 이는 리액트에서 false를 렌더링할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문이다.

import React from 'react';

function App() {
  const name = '리액트';
  return (
    <>{name === '리액트' && <h1>리액트입니다.</h1>}</>
       //왼쪽 항이 참일 때만 오른쪽 항이 렌더링
  );
}

export default App;

잠깐만뇨
falsy한 값인 0은 예외적으로 화면에 나타난다고 합니다

const number = 0;
return number && <div>내용</div>

위 코드는 화면에 숫자 0을 보여 준다.

5. undefined를 렌더링하지 않기

리액트 컴포넌트에서는 undefined가 반환되어 렌더링하는 상황에서 오류가 발생한다. 이를 방지하기 위해서는 OR 연산자(||)를 사용하면 된다.

import React from 'react';

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

export default App;

반면 JSX 내부에서는 undefined가 렌더링 되어도 상관 없다고 한다...! 뭐여

import React from 'react';

function App() {
  const name = undefined;
  return (<div>{name}</div>); //okay
}

export default App;

6. 인라인 스타일링

리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야 한다. 스타일 이름 중에서 background-color처럼 - 문자가 포함되는 이름은 카멜케이스로 바뀌어 backgroundColor가 된다.

// style 객체를 미리 선언한 경우
import React from 'react';

function App() {
  const name = '리액트';
  const style = {
    backgroundColor: 'black',
    fontSize: '48px',
    padding: 16 //단위 생략하면 px로 지정
  };
  return (<div style={style}>{name}</div>);
}

export default App;

// 바로 style 값 지정하는 경우
import React from 'react';

function App() {
  const name = '리액트';
  return (
    <div
      style={{
        backgroundColor: 'black',
        fontSize: '48px',
        padding: 16
      }}
    >
      {name}
    </div>
  );
}

export default App;

7. class 대신 className

일반 HTML에서 CSS 클래스를 사용할 때는 <div class="myclass"></div>와 같이 class라는 속성을 설정한다. 하지만 JSX에서는 class가 아닌 className으로 설정해 주어야 한다.

// src/App.css
.react {
  background-color: aqua;
  font-size: 48px;
  padding: 16px;
}

// src/App.js
import React from 'react';
import './App.css';

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

export default App;

8. 꼭 닫아야 하는 태그

HTML 코드를 작성할 때는 가끔 닫지 않은 상태의 태그들이 사용되기도 한다. 예를 들면 <input>, <br> 태그들은 닫지 않아도 문제 없이 작동한다. 하지만 JSX에서는 <input></input>처럼 반드시 태그를 닫아 주어야 한다. 태그 사이에 별도의 내용이 들어가지 않으면 <input/>처럼 self-closing 태그를 사용해도 된다.

9. 주석

JSX 내부에서 주석을 작성할 때는 {/* ... */}와 같은 형식으로 작성한다. 시작 태그를 여러 줄로 작성하게 된다면 그 내부에서 // ...와 같은 형식으로 작성 또한 가능하다. 하지만 그 이외 부분에서는 다 화면에 나타나게 된다.

profile
wanderlust

0개의 댓글