0. 어떻게 리액트에서는 JSX가 가능한가

• babel이 <script>안에 있는 JSX를 바꿔주기 때문이다.

1. JSX 기본문법 1

<aside> 💡 리액트에서 class=""를 넣고 싶으면 className="" 을 사용해야 한다.

</aside>

• 이유는 자바스크립트 내의 예약어 class와 차별을 두기 위해서이다.

[App.js]

function App(){
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
    </div>
  )
}

• 리액트 환경에서도 똑같이 HTML을 작성한다.
• css는 App.css 파일에서 코딩해준다.

[App.css]

(App.css)

.black-nav {
  background : black;
  width : 100%;
  display : flex;
  color : white;
  padding : 20px;
  font-weight : 600;
  font-size : 20px;
}

2. JSX 기본문법 2

<aside> 💡 중괄호 안에 데이터바인딩하고 싶은 변수명/함수명을 담으면 바인딩을 할 수 있다.

</aside>

• 데이터바인딩 : 자바스크립트 데이터를 HTML에 배치하는 것을 말한다.
• href, id, className, src 등 여러가지 HTML 속성들에도 데이터바인딩이 가능하다.

function App(){
 var data = 'nav';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
        <div className={data}>안녕하세요</div>
      </div>
    </div>
  )
}

• 자바스크립트 코드는 {}로 감싸줘야 한다. obj={a:1} 가 아니고, obj={{a:1}} 로 적어야한다.

3. JSX 기본문법 3

<aside> 💡 HTML에 스타일을 넣을 땐, 오브젝트 { } 형태로 넣고, 속성명은 카멜케이스를 사용한다.

</aside>