[React] Study #3 | JSX의 기본규칙

💡JSX?

• 리액트에서 생김새를 정의할 때, 사용하는 문법
• HTML처럼 생겼지만 실제로는 JavaScript!

return <div>JSX를 알아보자!</div>;

---

💡 JSX의 기본규칙

1️⃣ 꼭 닫혀야 하는 태그

import React from 'react'; 
import Hello from './Hello';  

function App() {
  return (
    <div>
      <Hello /> 
      <Hello /> 
      <Hello />
      
      /* 여기에서 오류 발생! 꼭 </div>로 닫아주자 */
      <div>	
      
    </div>
  );
}

export default App;

• HTML에서는 input과 br 태그를 닫지 않고 사용하기도 한다! 하지만 리액트에서는 그렇게 하면 안됨!
• Self Closing 태그를 사용하자!

• /* 잘못됨 */
  <input>
  <br>
  
  /* Self Closing 태그 */
  <input />
  <br />

2️⃣ 꼭 감싸져야하는 태그

• 두개 이상의 태그는 무조건 하나로 감싸져야 한다

{/* 잘못된 경우! */}
import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello />
    <div>두개이상의 태그는 어떻게?</div>
  );
}

export default App;


{/* 옳은 경우 : 꼭 태그 하나로 한번더 감싸주자 */}
import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
      <div>두개이상의 태그는 어떻게?</div>
     </div>
  );
}

export default App;

 

 

❗️그런데, div로 감싸기 애매하고 싫을땐 Fragment 로 감싸주자❗️

• 브라우저 상에서 따로 별도의 엘리먼트로 나타나지 않는다.
• <> ... </> 형태

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <>
      <Hello />
      <div>두개이상의 태그는 어떻게?</div>
    </>
  );
}

export default App;

 

3️⃣ 주석

• JSX 내부의 주석 {/* 요론형태 */}
• 열리는 태그 내부에서는 // 

import React from 'react'; 
import Hello from './Hello';  

function App() {
  return (
    <div>
      {/* 주석은 화면에 보이지 않는다. */}
      /* 중괄호로 감싸지 않으면 화면에 보인다 */
      <Hello 
        // 열리는 태그 내부에서는 이렇게 작성 가능
      /> 
      <Hello /> 
      <Hello /> 
    </div>
  );
}

export default App;

 

 

---

Reference

https://react.vlpt.us/