[React] JSX 란? (특징, CSS적용, className)

 
 
목차
1. JSX 란?
2. JSX 특징 및 주의사항
3. JSX의 CSS 적용
4. JSX 속성 사용방식
 

---

 

1. JSX 란?

 

• JSX는 JavaScript에 XML/HTML 형태의 마크업을 작성할 수 있게 해주는 JavaScript 확장 문법 
• Javascript에 XML 형식의 문법을 결합한 형태
• React에서는 렌더링 로직과 UI 로직이 연결되어 있다고 보기 때문에, 둘을 함께 구성하는 컴포넌트 단위로 관심사를 분리함.

 
 
 

---

2. JSX 특징 및 주의사항

 
 

💡  JSX의 특징      

1. JS 표현식 포함 가능
   • 중괄호 {} 안에 JavaScript 표현식 사용 가능
     예: <h1>Hello, {name}</h1>
2. JSX도 표현식이다!
   • JSX는 JavaScript 코드처럼 변수에 할당하거나, 인자로 전달하거나, 함수에서 반환 가능
3. 속성 정의
   • 문자열: <a href="...">
   • 표현식: <img src={user.avatarUrl} />
   • 주의: 속성에는 따옴표와 중괄호를 동시에 사용하지 않음
4. 속성 이름 규칙
   • JSX는 HTML 대신 JavaScript 문법을 따름
     예: class → className, tabindex → tabIndex
5. 자식 요소와 태그 닫기
   • 자식 포함 가능: <div><h1>Hello</h1></div>
   • 자식 없음: <img /> 처럼 스스로 닫는 태그 사용
6. 보안: XSS 방지
   • JSX는 자동으로 데이터를 이스케이프 처리하여 XSS 공격 방지

 
 
 

💡주의사항
 

1. 중괄호 {} 내부에는 자바스크립트 표현식만 넣을 수 있음
  JSX에서 중괄호는 JavaScript 코드를 실행하기 위해 사용된다.
단, if, for 같은 문(Statement)은 사용할 수 없음 / 변수, 연산식, 함수 호출 등 표현식(Expression)만 허용된다.
 
2. 숫자, 문자열, 배열 값만 렌더링 됨
 JSX에서 화면에 출력되는 값은 UI로 표현 가능한 값이어야 한다.
->  숫자(10), 문자열("hello"), 배열(['a', 'b'])은 화면에 렌더링 가능하다⭕!
->  true, undefined, null, 객체는 렌더링되지 않거나 에러를 유발한다.

const Main = () => {
    const number = 10;
    const obj = { a: 1 };

    return (
        <main>
            <img></img>
            <h1>main</h1>
            <h2>{number % 2 === 0 ? "짝수" : "홀수"}</h2>
            {10}                  // 숫자 → 렌더링됨
            {number}              // 숫자 → 렌더링됨
            {[1, 2, 3]}           // 배열 → 렌더링됨
            {true}                // 불린 → 무시됨
            {undefined}           // undefined → 무시됨
            {null}                // null → 무시됨
            {obj}                 // 객체 → ❌ 에러 발생
        </main>
    );
};

export default Main;

 
 
3. 모든 태그는 닫혀 있어야 함
 HTML에서는 <img>처럼 닫지 않아도 되지만, JSX에서는 반드시 닫아야 한다.
ex. <img /> 혹은 <img></img>
 
4. 최상위 태그는 반드시 하나여야 함
 JSX에서 return문 내에는 반드시 하나의 최상위 요소만 존재해야 한다.
여러 요소를 나열하려면 <div> or <> </>(React Fragment)로 묶어서 반환해야 한다.
 
 

*React Fragement ( <>...</> )
: 실제 DOM에서는 렌더링 되지 않지만, 여러 요소를 하나의 부로로 묶는 용도로 사용된다.

 
 
 
 
💡 JSX는 React 엘리먼트 객체로 변환된다.
JSX는 Babel에 의해 React.createElement() 호출로 변환되고, React는 이 객체를 기반으로 DOM을 구성함.
 
 
 
 
 
ᯓ ᯓ ᯓ ᯓ 예시 코드 ᯓ ᯓ ᯓ ᯓ
 
 

// App.jsx


import './App.css'
import Header from "./components/Header.jsx"; // 파일 확장자 .jsx 생략 가능
import Footer from "./components/Footer.jsx";
import Main from "./components/Main.jsx";
import Button from"./components/Button.jsx";

function App() { // 부모 컨포넌트

  const buttonProps={
    text: "메일",
    color: "red",
    a:1,
    b:2,
    c:3,
  };

  return (
    <>
      <Button {...buttonProps}/>
      <Button text={"카페"}/>
      <Button text={"블로그"}>
        <div>자식 요소</div>
      </Button>

    </>
  )
}

export default App;

- 부모 컴포넌트인 App()을 정의- 내부에서 다른 컴포넌트들을 렌더링
- 자식 컴포넌트-  import를 통해 Header, Main , Footer.jsx를 가져온다.
- 렌더링된 후 JSX 안에 나나타는 그 자체는 '엘리먼트'라고 부름
-  아래의 Return문은 최상위 요소로 React Fragment를 가지고, 그 안에 여러개의 Button 엘리먼드를 가지는 형태 !
 
 

 

 

// Button.js


// '구조 분해 할당'으로 가져옴.
const Button =({children, text, color ="black"})=>{

return <button style={{color: color}}>
    {text} - {color.toUpperCase()}
    {children}
    </button>;
};

export default Button;

- 구조분해할당으로 props 객체를 사용함; text, color, children이라는 props만 뽑아쓴 형태
    color="black"은 기본값 설정.
- buttonProps에는 text: "메일", color: "red" 등이 들어 있음. 이 경우, 구조분해로 text = "메일", color = "red" 가 넘어감!
 

 

 

// Main.jsx

import "./Main.css";

const Main=()=>{
    const user ={
        name:"Sally Ahn",
        isLogin: true,
    };

    if(user.isLogin){
        /*
        return <div style={{
            backgroundColor: "red",
            borderBottom: "5px solid blue",
        }}>로그아웃</div>
        */
        return <div className="logout">로그아웃</div>
    }
    else{
        return <div>로그인</div>
    }
    
};

export default Main;

 

- if문 안에 주석처리된 return 문과 그렇지않은 return문이 있다.
 
주석처리된 return 문 처럼 css를 태그 내부에서 정의해줄 수 있다. (=인라인 스타일)
  -  이때 css 속성은 "" 문자열로 처리하며, 속성이름은 카멜표기법으로 표기함!  
    ex. background-color (x) , backgroundColor (o)
 
아래 코드에서 사용하고 있는 return 문처럼 css를 외부 파일에 정의할 수도 있다. (=외부 CSS파일 사용)
  - 이때 HTML에서 사용하는 class 속성 대신 className을 사용해야 한다.
 

 * 자세한 css 적용방식은 아래에 정리 

 

 

 

 
Q. Main() 은 부모컴포넌트 일까? 
       A. 아니다. 단일컴포넌트이다.
 
 

 

부모컴포넌트: 자식 컴포넌트를 렌더링함.
단일컴포넌트: 일반 DOM요소만 렌더링함.
 
 
 
 

---

 

 

3. JSX의 CSS 적용

 
JSX에서 CSS를 적용하는 방법은 대표적으로 세 가지가 있으며, 각각의 방식은 상황에 따라 선택적으로 사용할 수 있다.
 
 
1. 인라인 스타일
인라인 스타일은 스타일을 객체 형태로 직접 작성하여 style 속성에 전달하는 방식
이때 스타일 객체의 속성 이름은 반드시 camelCase로 작성해야 하며, 값은 문자열이 아닌 JavaScript 값으로 지정해야 한다.
 

const styleObj = {
    color: "blue",
    fontSize: "20px",
    marginTop: "10px"
};

const Main = () => {
    return <h1 style={styleObj}>인라인 스타일</h1>;
};

 
 
2. 외부 CSS 파일 사용
기존 HTML/CSS 방식처럼 .css 파일을 따로 만들어서 import할 수 있다.
이때 HTML에서 사용하는 class 속성 대신 className을 사용해야 한다.
css 파일에서 className
 

 

// Main.css

.logout{
    background-color: pink;
    border-bottom: 5px solid green;
}

 
 

// Main.jsx

import "./Main.css";

const Main=()=>{
    const user ={
        name:"Sally Ahn",
        isLogin: true,
    };
    if(user.isLogin){
        return <div className="logout">로그아웃</div>
    }
    else{
        return <div>로그인</div>
    }

    
};

export default Main;

 
 
3. CSS Module 사용
CSS Module은 클래스명을 로컬 스코프로 관리할 수 있는 방식이다.
파일 이름에 .module.css를 붙이고 import하면 된다.
컴포넌트 단위로 스타일이 격리되기 때문에 클래스 이름 충돌을 방지할 수 있다.
 
 

 

// Main.module.css

.moduleTitle {
    color: green;
}

 

// Main.jsx

import styles from './Main.module.css';

const Main = () => {
    return <h1 className={styles.moduleTitle}>CSS Module 사용</h1>;
};

 
 
 

---

 
 

4. JSX의 속성사용방식

 

 

목적	HTML에서 사용	JSX에서 사용	설명
클래스 지정	class="box"	className="box"	class는 JS의 예약어라 className으로 대체됨
ID 지정	id="main"	id="main"	동일하게 사용 가능
인라인 스타일	style="color: red"	style={{ color: "red" }}	객체 형태로 작성, 속성은 camelCase
일반 속성	alt="text"	alt="text"	똑같이 사용 가능

 
 
 

---

 

 

 

 
 
 
 
 

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

JSX 소개 – React

 

설명이 부족한 부분이나 피드백은 댓글로 남겨주세요!

감사합니다 ☺️