React - JSX 문법

JSX는 HTML 처럼 보이지만 JS코드이다.

- 바벨이라는 도구 사용해서 XML코드가 JS로 변환되는 것

 

html코드를 javascript코드로 변환

 

지켜야 할 규칙들

1. 모든 태그들을 닫아주어야 한다.

- input이나 br 태그도 닫아주어야 한다. Ex) <input /> <br />

 

2. 두 개 이상의 태그는 무조건 하나로 감싸주어야 한다.

- 하지만 <div> 등으로 감싸게 되면 스타일이 꼬인다던지 하는 문제가 발생될 수 있음

=> <> </> 처럼 비어있는 태그로 감싸주면 해결(크롬 개발자 도구에서도 별도로 태그 나타나지 않음)

 

※ return 뒤에  JSX 코드 감싼 괄호는 가독성을 위한 것일 뿐, 코드상에는 문제 없음

 

3. JSX 내부에서 Javascript코드 사용하는 법

- 중괄호로 감싸서 변수 사용

 

4. style과 classname 사용하는 방법

style 사용

<div style="background-color: #fff;">

이런식으로는 동작하지 않음

=> 객체를 만들어 주어야 함 -> 이후 style에 객체 넣어줌

function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black', // -로 이어지는 속성들은 붙여서 대문자로
    color: 'aqua',
    fontSize: 24, // px 이 기본값
    padding: '1rem' // 별도의 단위는 문자열로 만들어서 사용
  };
  return (
    <>
      <Hello />
      <div style={style}>{name}</div> // style 객체를 넣어준다.
    </>
  );
}

export default App;

 

class 사용

- App.css -

.gray-box{
  background: gray;
  width: 64px;
  height: 64px;
}

- App.js -

import './App.css';

맨 위에 선언한 뒤

function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24,
    padding: '1rem'
  };
  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
      <div className="gray-box"></div>
    </>
  );
}

className="gray-box" 로 사용 / class라고 써도 작동은 되지만, 개발자 도구에 경고가 뜬다.

 

5. 주석 사용

return (
    <>
      /* 주석 처리 */
      <Hello />
      <div style={style}>{name}</div>
      <div className="gray-box"></div>
    </>
  );

이렇게만 하면 그대로 브라우저에 보이게 된다.

return (
    <>
      {/* 주석 처리 */}
      <Hello
      	// 태그 내부에 이런식으로 쓰는 주석은 화면에 안나타남
      />
      <div style={style}>{name}</div>
      <div className="gray-box"></div>
    </>
  );

중괄호로 감싸주어야 함

// 태그 내부에 이런식으로 쓰는 주석은 화면에 안나타남