JSX 사용하기

JSX 란?

• JSX = Javascript + XML
• React 에서 JSX 사용이 필수는 아니지만 많이 사용된다.
  
  

[ JSX 특징 ]

최상위 요소는 형제가 없는 고유한 요소! 반드시 부모 요소 하나가 감싸는 형태를 가져야 한다.

❌ 틀린 예시 ❌

<h1></h1>
<h1></h1>

⭕️ 옳은 예시 ⭕️

<div>
	<h1></h1>
	<h1></h1>
</div>

JSX 안에서 {}를 이용하면 Javascript 사용이 가능하다.

function App() {
  const name = 'SeSAC';
  return (
    <div>
      <h1>Hello {name}</h1>
    </div>
  );
}

연산자를 사용할 때는 아래의 방법을 이용해야 한다. ( if문 𝗫, for문 𝗫 )

1 - 계산을 다 한 후, 변수에 담아서 JSX 문법에서 보여주기

function App() {
  let flag = true;
  let txt = "";
  
  if ( flag ) { txt = "True 입니다."; }
  else { txt = "False 입니다."; }
  
  return (
    <div> {txt} </div>
  );
}

2 - {} 안에서 삼항 연산자 이용하기

function App() {
  let flag = true;
  
  return (
    <div>
      // 조건 ? 참 : 거짓
      { flag ? <h1>True입니다.</h1> : <h1>False입니다.</h1>}
      // 조건 && 참
      { flag && <h1>True일 때만 보이는 True 입니다.</h1>}
    </div>
  );
}

Style이나 HTML의 attribute를 쓸 때는 camelCase를 이용한다

• background-color   ➡   backgroundColor
• class   ➡   className
• onclick   ➡   onClick