[React] HTML과 JSX 문법 차이

리액트에서 함수형 컴포넌트의 함수 이름은 무조건 대문자로 시작한다. 그리고 여기서 jsx코드를 반환하는데 이 jsx는 문법이 html과 거의 비슷하다. 다만 다음의 3가지만 주의하면 된다!

 

1. 컴포넌트는 jsx를 반환할 때 반드시 하나의 태그만 반환해야 한다. 다수의 태그를 반환하고 싶다면 텅텅 빈 태그를 반환하거나 <Fragment> 태그를 이용하면 된다!

 

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

 

2. html에서는 class라는 태그를 사용하지만 jsx에서는 className이라는 태그를 사용한다.

 

function App() {
  return (
    <>
      <h1 className='blue'>Hello!</h1>
    </>
  );
}

 

3. html처럼 작성하지만 js코드도 작성이 가능하다. js코드를 넣기 위해서는 중괄호를 사용해야 한다.

 

function App() {
  const name = '채소';
  return (
    <>
      <p>{name}</p>
      <img 
        style={{width:'300px', height:'300px'}}
        src="https://images.unsplash.com/photo-1673794784636-2e69436d3eee?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1528&q=80" 
        alt="fuji"></img>
    </>
  );
}

 

<p>태그를 보면 name이라는 변수값을 가져오기 위해 중괄호를 쳤다. 중괄호 없이 name을 쓴다면 그냥 name이 출력될 것이다. 

<img>태그를 보면 style={{width:'300px', height:'300px'}} 이라고 나와있는데 이것은 style이라는 값에 자바스크립트 코드로 object 문법을 이용해서 객체의 값을 준다는 것이다. 그래서 with, height라는 키에 값이 들어있는 것이다. 이런 식으로 자바스크립트 코드를 넣어주기 위해서 여기서도 중괄호를 사용했다.

 

 

 

---

 

 

 

참고: https://react.dev/learn/writing-markup-with-jsx

Writing Markup with JSX – React

 

 

 

---

 

 

HTML코드를 JSX 문법으로 변환해주는 사이트

https://transform.tools/html-to-jsx

HTML to JSX