JSX

JSX

Javascript에 XML을 추가한 확장한 문법으로 리액트 컴포넌트 파일에서 XML형태로 작성을 한다면 babel이 JavaSrcipt로 변환시켜준다.

babel
babel은 자바스크립트 문법의 확장해주는 도구로, 아직 지원을 하지않는 최신 문법 / 편의상 문법 / 실험적 문법 등을 정식 자바스크립트로 변환시켜 구형 브라우저도 실행 시키는 기능을 합니다

• 하나의 JavaScript 파일에서 HTML도 작성할 수 있다.
• React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.

---

JSX 문법

• 두개 이상의 태그는 꼭 하나의 태그로 감싸져 있어야한다.

  리액트의 Fragment 라는 것을 사용하면 됩니다.
  태그를 작성 할 때 이름 없이 작성을 하게 되면 Fragment 가 만들어지는데, Fragment 는 브라우저 상에서 따로 별도의 엘리먼트로 나타나지 않습니다.

• 꼭 닫혀 있어야 한다
  input과 br같은 태그는 html에서는 닫지 않아도 되지만
  JSX에서는 꼭 닫아야한다.

• JSX 안에 자바스크립트 값 사용하기
  JSX 내부에 자바스크립트 변수를 보여줘야 할 때에는 {} 으로 감싸서 보여줍니다.

function App() {
  const name = 'react';
  return (
    <>
      <Hello />
      <div>{name}</div>
    </>
  );
}

JSX style

• JSX 에서 태그에 style 과 CSS class 를 설정하는 방법은 HTML 에서 설정하는 방법과 다릅니다.

우선, 인라인 스타일은 객체 형태로 작성을 해야 하며, background-color 처럼 - 로 구분되어 있는 이름들은 backgroundColor 처럼 camelCase 형태로 네이밍 해주어야 합니다.

function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
    </>
  );
}

• CSS class 를 설정 할 때에는 class= 가 아닌 className= 으로 설정을 해주어야 합니다

return (
    <>
      <Hello />
      <div style={style}>{name}</div>
      <div className="gray-box"></div>
    </>
  );
}

• 주석
  JSX 내부의 주석은 {/ 이런 형태로 /} 작성합니다.

 return (
    <>
      {/* 주석은 화면에 보이지 않습니다 */}
      /* 중괄호로 감싸지 않으면 화면에 보입니다 */
      <Hello  // 열리는 태그 내부에서는 이렇게 주석을 작성 할 수 있습니다.>
    </>
  );
}

---

참고 블로그 : 벨로퍼트 https://react.vlpt.us/