[React] JSX

JSX 란?

const element = <h1>Hello, world!</h1>;

JS를 확장한 문법으로, JS의 모든 기능이 포함되어 있고 React Element를 생성한다.

즉, HTML을 품은 JS

JS안에서 html같은 코드를 넣어서 UI 작업을 편하게 한다.

---

태그 닫아주기

<input type='text'/>

<input></input> 이렇게도 가능하지만, <input /> 도 가능하다

---

무조건 한개의 엘리먼트만 반환하기

function App() {
  return (
    <p>안녕하세요! 리액트 반입니다 :)</p>

    <div className="App">
      <input type='text'/>
    </div>
  );
}

export default App;

이렇게 return 뒤에 반환할 수 있는 엘리먼트는 1개

function App() {
  return (
    <div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      <input type="text" />
    </div>
  );
}

export default App;

이렇게!

---

JSX에서 JS 값을 가져오기

중괄호 {} 사용

function App() {
	const cat_name = 'perl';
  return (
    <div>
      hello {cat_name}!
    </div>
  );
}	

---

ClassName

JS는 <div class = :"HI"> 를 썼다면 JSX는 <div className = "HI"> 를 사용

---

인라인으로 style 주기

HTML에선 스타일을 이렇게 주었다면,

<p style="color: orange; font-size: 20px;">orange</p>

JSX에선 이렇게 쓴다.

//(1)
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

//(2)
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}