JSX

 

아래의 태그 문법은 문자열도, HTML도 아니다.

JSX라 하며 JavaScript를 확장한 문법

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

 

 

JSX 규칙

 

• 태그는 꼭 닫혀야 한다.
• 두개 이상의 태그가 존재하면 하나의 태그로 감싸줘야 한다.
• return()부분에서의 두개 이상의 태그 시
• javascript 값 에는 {} 사용
• 주석은 {/* */} 이렇게 달자 { } 빼먹으면 /* 내용 */  이렇게 출력됨

 

import './App.css';
import Hello from "./Hello";

function App() {
    const name = {
        title: 'my name is...',
        name: 'Lee soju'
    };
  return (
      //두개 이상의 태그에 하나로 감싸기
      //Fragment <></> : 불필요한 div 가 많을때 사용
      <>
          {/* js 값 사용시 { } 사용 */}
          <div>{name.title}</div>
          <h1>{name.name}</h1>
      </>

  );

}

export default App;

 

 

---

style

 

App.css 에 할당하지 않고 컴포넌트 내부적으로 css 를 줄 때

 

* 인라인 스타일을 줄 때에는 camleCase 로 적어줘야한다.

ex) fontSize <<< 이렇게

import './App.css';
import Hello from "./Hello";

function App() {
    const title = "Todays dinner";
    const dinner = {
        menu: "roasting clams",
        drink: "soju"
    };
    const customStyle = {
        color: "blue",
        fontSize: "25px"
    };
  return (
      //두개 이상의 태그에 하나로 감싸기
      //Fragment <></> : 불필요한 div 가 많을때 사용
      <>
          {/* js 값 사용시 { } 사용 */}
          {/* 컴포넌트 재사용 */}
          <h1>
              <Hello></Hello>
          </h1>
          <h1 style={customStyle}>{title}</h1>
          {/* 직접적으로 내부에 스타일을 먹일 때에는 {} 한번 더 사용 */}
          <div style={{ color: "darkred", fontSize: "20px" }}>menu: {dinner.menu}</div>
          <div style={{ color: "green", fontSize: "20px" }}>drink: {dinner.drink}</div>
      </>

  );

}

export default App;

 

결과

 

 

---

 

className

 

class 를 설정할 때에는 class 이 아니고 className 이 되어야한다

 

 

<div className="testBox"></div>

 

App.css

 

.testBox {
  background-color: darkblue;
  width: 50px;
  height: 50px;
}

 

결과