[리액트]JSX 사용 규칙 !

JSX (JavaScript XML) 란?

JavaScript의 확장 문법이면서 React에서 UI를 정의할 때 사용하는 문법으로, JavaScript 코드 안에서 HTML과 유사한 형식으로 요소를 작성할 수 있게 해준다.

---

 

JSX의 기본 규칙

📌JSX 요소는 하나의 부모 요소로 감싸야 한다.
📌 JavaScript 표현식 { } 안에 넣어야 한다.
📌 JSX 내부에서는 if문을 사용할 수 없으며, 삼항 연산자를 사용해야 한다.
📌 undefined를 렌더링하지 않도록 주의해야 한다.
📌 style 속성은 객체 형태로 전달해야 하며, CSS 속성은 camelCase로 작성해야 한다.
📌 HTML의 class 속성 대신 className을 사용해야 한다.

1. 감싸인 요소

JSX에서 여러 개의 요소를 반환할 경우, 반드시 하나의 부모 요소로 감싸야 한다.

Virtual Dom에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할수 있도록 , 컴포넌트 내부는 하나의  DOM트리 구조로 이루어져야 한다는 규칙이 있기 때문에 여려 요소가 있다면 반드시 부모 요소 하나로 감싼다.

function App() {
  return (
    <div>
      <h1>안녕하세요!</h1>
      <p>안녕못해.</p>
    </div>
  );
}

 

React.Fragment 사용
불필요한 div 요소를 추가하지 않으려면 React.Fragment 또는 빈 태그 <>...</>를 사용할 수 있다.

function App() {
  return (
    <>
      <h1>안녕하세요!</h1>
      <p>안녕못해</p>
    </>
  );
}

---

2. JSX에서 JavaScript 표현식 사용 → 동적인 데이터를 쉽게 렌더링할 수 있다.

JSX에서는 { } 중괄호를 사용해 JavaScript 표현식을 삽입할 수 있다.

* JSX 내부에서는 if문을 사용할 수 없다.

const name = 'zing';
const element = <h1>Hello, {name}</h1>;

//{name} 부분이 JavaScript 표현식이며, 해당 값이 동적으로 JSX에 삽입된다.

 

{name} 부분이 JavaScript 표현식이며, 해당 값이 동적으로 JSX에 삽입된다.

---

3. JSX에서 조건부 렌더링(삼항 연산자)

JSX 내부에서 if문을 사용할 수 없기 때문에, 삼항 연산자(조건부 연산자 ? : )를 사용해야 한다.

 

삼항 연산자를 사용한 조건부 렌더링

const isLoggedIn = true;

const element = (
  <div>
    {isLoggedIn ? <h1>환영합니다!</h1> : <h1>로그인해주세요.</h1>}
  </div>
);

 

• if문을 JSX 외부에서 처리하는 방법도 있다.
• && 연산자로 특정 조건에서만 렌더링하기

---

4. undefined를 렌더링하지 않기

JSX에서 undefined를 렌더링하면 오류는 발생하지 않지만, 아무것도 표시되지 않는다.

---

5. JSX에서 인라인 스타일링

React에서 style 속성을 사용할 때는 문자열이 아닌 객체 형태로 전달해야 한다.

HTML에서는 background-color와 같이 -(하이픈)이 포함된 스타일 속성을 사용하지만, JSX에서는 카멜 표기법(camelCase)으로 변환해야 한다.

const divStyle = {
  backgroundColor: "blue", // 카멜 표기법 사용
  color: "white",
  fontSize: "20px",
  padding: "10px"
};

const element = <div style={divStyle}>스타일 적용된 div</div>;

 

 

HTML에서는 class 속성을 사용하지만, JavaScript에서 class는 예약어이므로 JSX에서는 className을 사용해야 한다.

 

HTML속성	JSX 속성
class	className
for	htmlFor
onclick	onClick
maxlength	maxLength

 

---

 📌 참고 자료 📌 

 

JSX 소개 – React