스파르타 코딩클럽 - 리액트 1주차(6)

1. JSX 규칙

1-1. 태그는 꼭 닫아주기!

<input type='text'/>

• 위와 같이 어떤 태그가 되었든 태그는 무조건 닫아준다.

1-2. 무조건 1개의 엘리먼트를 반환하기!

return (
    <div className="App">
      <p>하이루</p>
      <input type='text'/>
    </div>
  );

• 위와 같이 컴포넌트에서 반환할 수 있는 엘리먼트는 1개이다.

1-3. JSX에서 JavaScript 값을 가져오려면?

const cat_name = 'perl';
// return 부분만 복사해서 붙여넣고 크롬 브라우저로 돌아가 새로고침 해봅시다.
    return (
      <div>
        hello {cat_name}!
      </div>
    );

• 중괄호를 사용한다.

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;

1-4. class 말고 className를 사용한다

<div className="App">

• 위와 같이 HTML에서 사용했던 class말고 React에서는 className을 적어주어야한다.

1-5. 인라인으로 style주기

• HTML

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

• jsx

// 중괄호를 두 번 쓰는 이유? 딕셔너리도 자바스크립트니까요!
// 이렇게 쓰거나,
<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>
  );
}