JSX문법 규칙

1. 태그는 꼭 닫는다.

function App() {
  return (
    <div className="App">
      <input type='text'>
    </div>
  );
}

input 태그에 닫기 / 를 사용하지 않아, 오류가 발생한다.

따라서 input태그에도 닫기 /를 사용하자.

function App() {
  return (
    <div className="App">
      <input type='text' />
    </div>
  );
}

 

2. 무조건 1개의 엘리먼트를 반환한다.

 

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

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

위와같이 작성하면 반환값이 한 컴포넌트에서 <p>태그와 <div>태그 두개 이기때문에 오류가 발생한다.

따라서 두개를 한 태그로 묶어야한다.

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

 

3. JSX에서 javascript값을 가져오려면 중괄호를 사용한다.

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

cat_name은 javascript값이기 때문에 return할 때에는 중괄호{}안에 작성해야 변수의 값이 출력된다.

중괄호를 사용하지 않으면 cat_name 문자열 그대로 출력된다!

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const number = 1;

  return (
    <div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      {/* JSX 내에서 코드 주석은 이렇게 씁니다 :) */}
      {/* 삼항 연산자를 사용했어요 */}
      <p>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
    </div>
  );
}

export default App;

삼항 연산자를 사용할 때에도 중괄호를 사용해야 한다!

삼항연산자 뿐아니라 map, filter 등 자바스크립트 문법을 JSX안에 쓸 때도 중괄호를 사용해야 한다.

 

4. class대신 className을 사용한다.

<div className="App">

JSX로 작성하는 태그 내에서 클래스 명을 정할 때에는 속성값을 className으로 사용한다!

 

5.인라인으로 style을 준다.

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

위와같이 태그에 스타일을 직접 넣는것과 조금 다르게

 

// 중괄호를 두 번 쓰는 이유? 딕셔너리도 자바스크립트니까요!
// 이렇게 쓰거나,
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

//혹은 스타일 딕셔너리를 변수로 만들고 쓸 수 있어요!
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

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

이렇게 중괄호를 두번 써서 style을 주거나, 딕셔너리 변수로 만들어 사용한다.