1. jsx 문법

JSX 문법은 자바스크립트 파일 내에서 html을 표현할 때 사용되는 문법이다.

리액트에서 많이 사용되는 JSX 문법은 아래와 같다.

 

1. className

JSX 문법과 html 문법의 차이점 중에 하나로

class를 부여할 때

'className'으로 카멜케이스를 활용해서 사용 해야 한다.

 

이를 사용해서 app.js파일에서 클래스 이름을 부여 하면

app.css에서 css하는데 활용 할 수 있다.

 

*css파일은 app.js파일 내에 import 해야 적용할 수 있다.

 

2. 데이터바인딩시 {중괄호} 활용

리턴 문 밖에서 정의한 변수를 리턴안에서 활용(데이터 바인딩) 하고 싶다면

중괄호 안에 변수를 넣으면 적용 가능하다.

변수는 컨텐츠 내용 넣을 때나 클래스 이름 작명 할 때도 범용적으로 사용가능하다

import "./App.css";

function App() {
  let product = "water";
  return (
    <>
      <div className="black-nav">
        <h4 className={product}>{product}</h4>
      </div>
    </>
  );
}

export default App;

3. style={{속성:'값',속성:'값'}}

인라인 스타일을 이용하고 싶다면,

style={{속성:'값'}} 형태로 적용 해야 한다.

이 형태는 중괄호안에 객체 형태로 프로퍼티와 값이 들어가 있는 형태이다.

function App() {
  let product = "water";
  return (
    <>
        <h4 style={{ color: "red" }}>빨간색 제목</h4>
    </>
  );
}

export default App;