React JSX

리액트에서는 함수형 컴포넌트와 클래스형 컴포넌트가 존재합니다.
그리고 그 컴포넌트를 보면 이런 식으로 작성이 되어 있습니다.

import React from 'react';

function App(){
 return (
  <div>
    <strong>Component</strong>
  </div>
 )
}

이는 함수형 컴포넌트로 함수 내부에 return 해주는 것이 HTML을 작성한 것처럼 유사해 보이지만, HTML 과는 다른 점이 있습니다. 비슷하면서도 사실은 다른 것이죠. 이렇게 react에서 사용되는 코드를 JSX라고 합니다.

  JSX

• JSX(Javascript XML)는 Javascript에 XML을 추가한 확장 문법입니다.
• JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아닙니다.
• HTML과 흡사하지만 빌드 시 Babel에 의해 자바스크립트로 변환됩니다.

---

JSX 문법

JSX도 나름의 규칙이 있습니다.

반드시 부모 요소 하나가 감싸는 형태여야 합니다.

...javascript
return(
	<div>Voler</div>
    <div>log</div>
)

이와 같은 형태로 작성할 경우 에러가 발생합니다.

<div>

...javascript
return(
	<div>
      <div>Voler</div>
      <div>log</div>
    <div/>
)

<>

...javascript
return(
	<>
      <div>Voler</div>
      <div>log</div>
    </>
)

<Fragment>

...javascript
return(
	<Fragment>
      <div>Voler</div>
      <div>log</div>
    <Fragment/>
)

---

자바스크립트 표현식

JSX 안에서도 자바스크립트 표현식을 사용할 수 있습니다. 자바스크립트 표현식을 사용하려면 JSX 내부에서 코드를 {} 블록으로 감싸주면 됩니다.

import React from 'react';

function App(){
 const str = "Component"
 return (
  <div>
    <strong>{str}</strong>
  </div>
 )
}

조건부 연산자

JSX 안에서는 if 문을 사용할 수 없습니다. 대신 조건부 연산자(삼 항 연산자)를 사용하여 조건하에 렌더링이 가능합니다.

import React from 'react';

function App(){
 const isBoolean = true;
 return (
  <div>
   { isBoolean ? 
    <strong>true 입니다.</strong> 
    : 
    <strong>false 입니다.</strong>
   }
  </div>
 )
}

반복문의 사용

위와 같이 {} 블록 안에 들어가게 되면 자바스크립트 문법으로 JSX를 사용할 수 있습니다.

import React from 'react';

function App(){
 const isArr = ["하나","두울","세엣"];
 return (
  <div>
   { for(let i in isArr){
    <strong>{isArr[i]}</strong> 
   	}
   }
  </div>
 )
}

카멜표기법

기존에 HTML에서 스타일을 지정하게 될 때 background-color와 같은 - 문자가 포함된 이름들을 JSX에서는 - 문자를 제외하고 카멜 표기법으로 작성합니다.
또한 class를 지정해 줄 때에도 class에서 className으로 변경됩니다.

import React from 'react';

function App(){
 const appStyle = {
  backgroundColor:'red'
 }
 return (
  <div style={appStyle} className="isDiv" >
    <strong>{str}</strong>
  </div>
 )
}

backgroundColor와 className 등 react의 JSX에서 사용하는 방법은 기존의 HTML과는 사뭇 다릅니다.

출처 : DESIGNLOPER
출처 : 갓대희의 작은공간
출처 : ChanBlog