[React] 3. JSX 문법 | 민민의 하드디스크 - 티스토리

JSX 문법에 대해

 

리액트 공부를 하며, JSX를 처음 접해본다.

사용하기 위해선 규칙을 알아야 하기 때문에 정리를 해봤다.

 

1. 감싸인 요소

컴포넌트 함수 내부에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다.
<div>태그를 사용해도 되고, 리액트 v16이상이라면 <Fragment>태그를 사용할 수 있다.

잘못된 예시

function App(){
  return (
    <h1>문단1</h1>
    <h2>문단2</h2>
  )
}

감싸주지 않는다면 오류가 발생한다.

올바른 예시

function App(){
  return (
    <div>
      <h1>문단1</h1>
      <h2>문단2</h2>   
    </div>
  )
}

여기서 <div> ~ </div> 를 <> ~ </> 또는 <Fragment> ~ </Fragment>로 써도 무방하다.

 

2. 자바스크립트 표현

JSX는 DOM 요소 렌더링 기능뿐 아니라, 자바스크립트 표현식을 사용할 수 있다.

function App() {
  let name= '민민의 하드디스크';
  return (
    <>
      <h1>{name}를 방문해주셔서 감사합니다. </h1>
    </>
  );
}

export default App;

 

실행 결과

 

 

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

JSX 내부의 자바스크립트 표현식에서 if문을 사용할 수는 없다. 하지만 if문을 활용하여 사전에 값을 설정할 수는 있다.
삼항 연산자라고 불리는 JSX 조건부 연산자는  { } 안에 조건부 연산자를 사용하면 된다.

예시: [조건] ? [참일 때] : [거짓일 때]

 

코드 예시

function App() {
  let name= '리액트';
  return (
    <div>
      {name === '리액트' ? (<>True</>) : (<>False</>)}
    </div>
  );
}

export default App;

 

실행 결과

 

 

4. undefinded 렌더링 제외

정의되지 않은 값인 undefinded는 변환하여 브라우저에 출력되지 않는다.

import './App.css';

function App() {
  const name=undefined;
  return name
}

export default App;

 

 

 

 

5. 인라인 스타일링

리액트에서는 DOM 요소에 스타일을 적용할 때는 문자열 형태가 아닌 객체 형태로 넣어야한다.
DOM 요소에 '-'와 같은 문자가 포함되는 이름이 있어서는 안 된다.
카멜 표기법으로 변경해주거나 다른 방식으로 변경해야된다.

잘못된 예시

background-color: 'black'

 

올바른 예시

backgroundColor: 'black'

 

 

 

6. class 대신 className

일반 HTML에서 CSS 클래스를 사용할 때는 <div class ="">이었지만 JSX에서는 <div className=""> 으로 변경해주어야한다.

잘못된 예시

<div class="react"> {name} <div>

올바른 예시

<div className="react"> {name} <div>

 

 

 

7. 주석

일반 자바스크립트에서의 주석은 " /* ··· */ " 또는 " // ··· " 와 같은 형식으로 작성했지만
JSX에서는 {/* ··· */}와 같은 형식으로 작성한다.

예시

{/* 안녕하세요 */}