[React] JSX 문법, 리액트 엘리먼트, 리액트 컴포넌트

 

• JSX 문법이란?
• 리액트 엘리먼트(React Element)란?
• 리액트 컴포넌트(React Component)란?

 

---

- JSX 문법이란?

 

JSX 문법은 자바스크립트(JS)로 HTML과 같은 문법을 사용할 수 있는 편리한 문법이다.

 

JSX 문법에는 여러가지 규칙들이 존재한다.

 

 

①  속성명은 카멜 케이스로 작성한다.

- 카멜 케이스(camel case)란?

var camelCase;

 

중간 글자들은 대문자로 시작하지만 첫 글자가 소문자인 경우, 낙타 모양과 비슷하다 하여 지어진 이름이다.

 

 

②  자바스크립트 예약어와 같은 속성명은 사용 불가하다.

<h1 class="hello">안녕하세요</h1>                // 불가

<h1 className="hello">안녕하세요</h1>        // 가능

 

 

③  반드시 하나의 요소로 감싸기

// 1. 부모 태그로 감싸기
function App() {
    return (
        <div>
            <h1>안녕하세요</h1>
        </div>
    )
}

// 2. Fragment 태그로 감싸기
function App() {
    return (
        <>
            <h1>안녕하세요</h1>
        </>
    )
}

 

 

④  자바스크립트 표현식 넣기

function handleClick() {
  alert('클릭했습니다!');
}

function App() {
  return (
    <>
      <h1>나만의 {item} 주문하기</h1>
      <button onClick={handleClick}>확인</button>
    </>
  );
}

 

JSX에서 중괄호({})를 사용하여 자바스크립트 표현식을 사용한다.

 

---

- 리액트 엘리먼트(React Element)란?

import ReactDOM from 'react-dom';

var element = <h1>Hello React!</h1>;

ReactDOM.render(element, document.getElementById('root'));

 

리액트 엘리먼트는 DOM에 렌더링을 할 때마다 화면에 표시되는 내용을 설명한다.

 

JSX로 작성한 요소는 결과적으로 자바스크립트 객체가 된다.

 

---

- 리액트 컴포넌트(React Component)란?

import ReactDOM from 'react-dom';

function Hello() {
    return <h1>안녕 리액트</h1>;
}

const element = (
    <>
        <Hello />
        <Hello />
        <Hello />
    </>
);

 

리액트 컴포넌트는 리액트 엘리먼트를 조금 더 자유롭게 다루기 위한 하나의 문법이다.

 

컴포넌트를 가장 간단하게 만드는 방법은 자바스크립트의 함수를 이용하는 방법인데,

위의 예시는 Hello라는 함수가 하나의 컴포넌트이다.

 

컴포넌트를 작성하게 되면, 컴포넌트 함수의 이름을 통해 하나의 태그처럼 활용할 수 있다는 장점이 있다.

 

---

이미지 출처 : https://miro.medium.com/max/650/1*vCc0B38L1xwL0Fw4NZCABw.jpeg