[react] react에서 사용하는 JSX 문법

JSX

• 자바스크립트의 확장 문법
• 브라우저에서 실행하기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
• JSX는 자바스크립트의 공식적인 문법이라고 할 수는 없다.
• 즉 , 자바스크립트에서 HTML을 작성하듯이 비슷하게 작성할 수 있도록 해주는 것이 JSX의 가장 큰 장점이다.

JSX 문법의 특징 및 준수사항

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

<script>
function App(){
	return(
    	<h1>text1</h1>
        <h1>text2</h2>
      )
   }
</script>

위처럼 요소가 두 개 이상 존재 할때는 그것을 감싸는 요소가 있어야 한다.

<script>
function App(){
	return(
    <div>
    	<h1>text1</h1>
        <h1>text2</h2>
    </div>
      )
   }
</script>

이렇게 감싸는 이유는 , 리액트가 사용하는 Virtual DOM 방식에서는 컴포넌트 변화를 감지할 때 효율적으로 비교하고자 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.

자바스크립트 표현 : 자바스크립트의 값을 JSX 안에서 렌더링할 수 있다.

name의 값을 {name}과 같이 넣어 렌더링이 가능하다.

<script>
import React from 'react';

function App() {
	const name = '리액트';
    return (
    <>
    	<h1>{name}</h1>
        <h2>test</h2>
    </>
  );
}

export default App;
</script>

JSX 내부의 자바스크립트 표현식 내에서 if문을 사용할 수 없어서 , 조건부 연산자(삼항 연산자)를 사용한다.

<script>
function App() {
    const name = '리액트';
  return (
   <div>
          {name === '리액트'? (
          	<h1>리액트</h1>
          ) : (
          	<h2>리액트가 아님</h2>
          )}
      
   </div>
      
  );
}
</script>

undefined를 렌더링하지 않아야 한다.

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

단 , JSX 내부에서 undefined를 렌더링 하는 것은 에러가 나지 않는다.

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

기존에 HTML에서 스타일을 지정할 떄 background-color 와 같이 - 문자가 포함된 이름들을 , JSX에서 사용할 때는 - 를 없애고 카멜 표기법으로 작성해야 한다.

<script>
function App() {
  const style = {
      backgroundColor: 'white',
      fontSize: '10px',
      fontWeight: 'bold'
  }
  return (
  	<div style={style}>테스트</div>
  )
}
</script>

div 등 class 속성을 설정할 때

<script>
<div className="classEx1">
    
</div>
</script>

className이라고 표시해야 한다.

HTML 등에서 input 태그 등 별도로 닫지 않아도 괜찮지만 , JSX에서는 반드시 닫아주는 태그를 작성해야 한다.

<script>
<input></input>
// 혹은 다음과 같이 self-closing 태그로 작성해도 무방
<input />
</script>