[React] JSX 개념, 문법 정리

 

JSX (JavaScript XML)란?

- 자바스크립트에 XML을 추가한 확장 문법
- 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환

// JSX로 작성
function App(){
  return{
    <div>
      Hello <b> world </b>
    </div>
  );
}

// 변환된 코드
function App(){
  return React.createElement("div", null, "Hello", React.createElement("b", null, "world"));
}​

- JSX 사용 시 HTML을 작성하듯이 활용할 수 있으므로 가독성이 높아지고 편하게 UI 렌더링 가능

JSX 문법

- 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야함

// 부모 태그로 감싸지 않을 시
function App() {
  return (
    <h1> test 1</h1>
    <h2> test 2</h2>
  );
}

export default App;

// 아래와 같은 에러 발생
`Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. 
Did you want a JSX fragment <>...</>?`


// <div> 태그로 감싸면 정상 작동
function App() {
  return (
    <div>
      <h1> test 1</h1>
      <h2> test 2</h2>
    </div>
  );
}

export default App;

- 자바스크립트 표현식을 사용할 수 있음

function App() {
  const name = "React"
  return (
    <div>
      <h1> {name}</h1>
    </div>
  );
}

export default App;

- if문 대신 조건부 연산자 사용 가능

function App() {
  const name = "React"
  return (
    <div>
      {name === 'React' ? (<h1> 리액트 </h1>) : (<h2> !리액트</h2>)}
    </div>
  );
}

export default App;

 true일 경우

fasle일 경우

- AND 연산자(&&)를 사용한 조건부 렌더링을 할 수 있음

`AND 연산자는 false일 경우 null이므로 표시되지 않음`
function App() {
  const name = "React"
  return (
    <div>
      {name === 'React' && <h1>리액트</h1>}
    </div>
  );
}

export default App;​

- 인라인 스타일링 사용 가능

`DOM 요소에 스타일 적용시 문자열 형태가 아닌 객체 형태로 넣어야 함`
`카멜 표기법으로 작성 (background-color -> backgroundColor)`

function App() {
  const name = "React"
  const style = {
    backgroundColor : 'black',
    color : 'aqua',
    fontSize : '60px',
    padding : 16
  }
  return (
    <div style={style}>{name}</div>
  );
}

export default App;

`미리 선언하지 않고 직접 style 적용 가능`
function App() {
  const name = "React"
  return (
    <div style = {{backgroundColor : 'black',
    color : 'aqua',
    fontSize : '60px',
    padding : 16
  }}>
    {name}
  </div>
  );
}

export default App;

- className으로 스타일 적용 가능

//App.css

.react{
  background : black;
  color : aqua;
  font-size: 70px;
  font-weight : bold;
  padding : 16;
}

//App.js
`HTML처럼 class가 아닌 className으로 설정`
function App() {
  const name = "React"
  return (
    <div className="react">{name}</div>
  );
}

export default App;