[React] JSX

 

JSX

 

---

 

# JSX란

 

 JSX는 자바스크립트의 확장된 문법이다. 기존의 웹 페이지와는 다르게 html과 자바스크립트를 분리하지 않고, 둘 다 포함하는 컴포넌트라는 것을 사용한다. 간단히 표현하자면 React에서 사용하는 html인데, 자바스크립트 문법이 적용된 것이라고 할 수 있을 것 같다.

 

export default function App() {
  const text = "hello";
  const arr = [0, 1, 2];
  
  return (
     <div>
        <h1>{text}</h1>
        <div>{arr.map((item) => <div>{item}</div>)}</div>
     </div>
  );
}

 

 이렇게 하나의 파일에 html과 자바스크립트가 모두 있다. 또한, 자바스크립트에서 표현된 변수와 함수를 바로 html에 적용할 수 있다. 이렇게 React에서는 JSX로 표현된 html을 사용한다.

 

 

# 특징

 

1. 컴포넌트에 여러 엘리먼트 요소가 있다면 반드시 하나의 부모 요소로 감싸줘야 한다.

 

// 이렇게 작성하면 안 됨

export default function App() {
  // 생략
  return (
     <h1>hello</h1>
     <h1>world</h1>
  );
}

 

// 이렇게 하나의 부모 요소로 감싸주기

export default function App() {
  // 생략
  return (
     <div>
        <h1>hello</h1>
        <h1>world</h1>
     </div>
  );
}

 

최상단에 모든 요소를 감싸를 부모 요소가 무조건 하나 있어야 한다.

 

 

2. onclick이 아니라 onClick, onchange가 아니라 onChange, ...

 

export default function App() {
  return (
     <div onClick={함수}>
        <h1>hello</h1>
        <h1>world</h1>
     </div>
  );
}

 

요소의 속성을 적어줄 때 카멜 표기법으로 작성한다.

 

 

3. class가 아닌 className이라고 작성한다.

 

export default function App() {
  return (
     <div className="container">
        <h1>hello</h1>
        <h1>world</h1>
     </div>
  );
}

 

 JSX는 자바스크립트의 확장 문법이다. 따라서, 요소의 class를 지정할 때 class라고만 적으면 안 된다. 자바스크립트의 class라는 문법과 이름이 겹치기 때문!

 

 

4. 데이터 바인딩 매우 쉬움

 

기존의 html, 자바스크립트와는 다르게 getElementById() 같은 거 없어도 변수와 함수를 넘길 수 있다.

 

export default function App() {
  const text = "hello";
  const arr = [0, 1, 2];
  
  return (
     <div>
        <h1>{text}</h1>
        <div>{arr.map((item) => <div>{item}</div>)}</div>
     </div>
  );
}

 

중괄호로 묶어서 바로 넘기면 된다.

 

 

5. 객체 형식으로 style 지정 가능

 

export default function App() {
  return (
     <div style={{ backgroundColor: "black", color: "white" }}>
        <h1>hello</h1>
        <h1>world</h1>
     </div>
  );
}

 

요소에 바로 style을 지정할 수 있다. 이때, 객체 형식으로 작성해주어야 한다.

 

---

 

참고 자료

https://ko.reactjs.org/docs/introducing-jsx.html

https://youtu.be/FqnAFX9lQPQ