JSX

Seung·2022년 3월 7일

😄 JSX

const element = <h1>Hello</h1>;

위의 태그는 문자열도 HTML도 아닌 JSX이다

JSX

JavaScript에 XML을 추가한 구문 확장으로 HTML 문법을 JavaScript 코드 내부에서 쓴 것을 말한다 (JavaScript의 공식적인 문법은 아니다)

외관상 HTML과 같은 마크업 언어로 보이지만 빌드시 Babel에 의해 JavaScript로 변환된다

React 요소를 생성한다

function App() {
  return React.createElement('h1', {}, 'hello');
}

JSX가 없었을 때는 위의 코드처럼 React에 있는 createElement 함수를 이용해서 h1 태그를 만들고 { } 안에 스타일 등을 지정하고 ' '안에 데이터를 입력하는 등 불편했지만 JSX의 등장으로 아래 코드처럼 간편하게 작성이 가능해졌다
엄밀히 말하면 위의 코드와 아래의 코드는 동일하다. 다만 빌드시 아래의 코드를 Babel이 위의 코드처럼 JavaScript로 변환시켜주기 때문에 편리한 것이다

function App() {
  return <h1>hello</h1>;
}

😄 JSX 문법

👉 문법 1. JSX는 다수의 태그들을 리턴할 수 없기 때문에 형제노드가 있을 경우 반드시 묶어줘야한다

function App() {
  const name = 'sam';
  return (
    <React.Fragment>
      <h1>hello</h1>
      <h1>hi</h1>
    </React.Fragment>
  );
}

function App() {
  const name = 'sam';
  return (
    <>
      <h1>hello</h1>
      <h1>hi</h1>
    </>
  );
}

function App() {
  const name = 'sam';
  return (
    <div>
      <h1>hello</h1>
      <h1>hi</h1>
    </div>
  );
}

- 위 3개의 코드는 동일하지만 div를 남용해서 감싸주기보다는 React.Fragment나 <>를 사용하자

React의 VDOM이 Component의 변화를 감지할 때 Componet 내부는 하나의 DOM Tree로 이루어져야 한다는 규칙이 있기 때문에 이러한 문법을 사용한다

👉 문법 2. JSX 내부에서 JavaScript 표현식을 사용할 수 있다

function App() {
  const name = 'sam';
  return <h1>hello, {name}</h1>;
}

JavaScript 표현식 : JavaScript의 값을 JSX 안에서 렌더링 할 수 있는 것
위의 코드처럼 JavaScript 표현식을 사용할려면 변수 name을 중괄호{}로 감싸줘야 한다
중괄호를 생략하면 hello, name으로 출력된다
중괄호 안에는 변수, 연산자 등만 사용 가능하고 if, switch, console 같은 문장은 사용 할 수 없다

👉 문법 3. if문, for문 사용 불가

if문과 for문은 JavaScript 표현식이 아니기 때문에 JSX 내부에서 사용할 수 없다
따라서 JSX 내부에서는 삼항 연산자를 사용하고 JSX 외부에서 if문을 사용하도록 한다

👉 문법 4. HTML에서 스타일 지정할 때 사용한 background-color, onclick 등등 JSX에서는 카멜 표기법으로 작성해야 한다

ex) onclick ---> onClick
ex) background-color ---> backgroundColor

👉 문법 5. 클래스명 지정

HTML에서 클래스명 지정

<h1 class = "title"></h1>

JSX에서 클래스명 지정

<h1 className = "title"></h1>

👉 문법 6. 주석

JSX 내부에서 주석은 / ... / 와 같은 형식으로 작성
시작 태그를 여러줄로 작성하면 태그 내부에서 //를 사용하여 주석을 작성할 수 있다

👉 문법 7. 클로징 태그

HTML에서 input이나 br을 사용할 때는 태그를 안닫아도 됐지만 React는 모든 태그를 클로징 태그를 써서 작성해야 한다

HTML

  <input></input>

  <input />

👉 문법 8. 배열

function App() {
  return (
    <React.Fragment>
      <h1>fruit</h1>
      {['사과', '딸기'].map((fruit) => {
        return <h1>{fruit}</h1>;
      })}
    </React.Fragment>
  );
}

😍 코드 지적은 언제나 환영입니다. 읽어주셔서 감사합니다. 😍

Seung

지적은 제 발전의 원동력입니다. 사소한 것이라도 지적해주세요 :)

JSX