[React] JSX 기초 문법을 공부해보자

JSX vs 순수 자바스크립트 함수

1. JSX(JavaScript XML) 방식 

function App() {
  return (
    <div className="App">
      <h1>Hello, 리액트!!</h1>
    </div>
  );
}

• 개발자가 화면 구조를 한눈에 파악하기 매우 쉽습니다.
• 브라우저는 원래 이 코드를 이해하지 못합니다. 그래서 실행 직전에 바벨(Babel) 같은 도구가 아래의 코드로 번역해 줍니다.

---

2. React.createElement 방식 

function App() {
  return React.createElement("div", null, "Hello, 리액트!!", React.createElement("p", null));
}

• 순수 자바스크립트 함수 호출 형태입니다.
• 가상 DOM 객체를 만드는 실제 모습입니다.

 

📝 JSX 핵심 문법 정리

1. 반드시 부모 요소로 감싸기

JSX는 반드시 하나의 부모 태그로 감싸져야 합니다. 리액트의 가상 DOM이 컴포넌트 변화를 효율적으로 감지하기 위해 하나의 트리 구조를 가져야 하기 때문입니다. 

• <div></div>, Fragment(<> </>)를 사용할 수 있습니다. 

2. 자바스크립트 표현식은 중괄호 { } 안에!

HTML 태그 사이에서 자바스크립트 변수나 로직을 쓰고 싶을 땐 { }를 사용합니다.

• 삼항 연산자: 조건에 따라 다른 UI를 보여줄 때 유용합니다.

  { name === "리액트" ? <h1>YES</h1> : null }
  

•  논리 연산자 (AND, OR): 조건이 맞을 때만 보여주거나(&&), 값이 없을 때 기본값을 보여줄 때(||) 사용합니다.

  { port || '포트를 설정하지 않았습니다.' }
  

function App() {

  const port = undefined;

  return (
    <div>
    {
      port || '포트를 설정하지 않았습니다.'
    }
    </div>
  )
}

3. 인라인 스타일링은 '객체'로

리액트에서 style 속성을 직접 줄 때는 문자열이 아닌 객체(Object) 형식을 사용합니다.

• CamelCase 사용: background-color 대신 backgroundColor처럼 대문자로 이어 씁니다.
• 중괄호 두 번: style={{ color: 'red' }}에서 바깥쪽 {}는 JS 사용을 위한 것, 안쪽 {}는 객체를 의미합니다.
• 미리 변수로 선언해서 <h1 style={style}> 처럼 넣는 게 코드가 훨씬 깔끔합니다.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  let name = "변수 사용법";
  const style = {
    backgroundColor : 'black',
    color: 'white',
    fontSize: '48px',
    fontWeight : 'bold',
    padding : '20px'
  }

  return (
    <div style = {
      {
        backgroundColor : 'black',
        color: 'white',
        fontSize: '48px',
        fontWeight : 'bold',
        padding : '20px'
      }
    }>
      <h1 style = {style}>Hello, 
        {
          name === "리액트" ? (<h1>YES</h1>) : null
        }
        !!</h1>
    </div>
  );
}

export default App;

4. 태그는 무조건 닫아야 함 (Self-Closing)

HTML에서는 <img>나 <input>을 닫지 않기도 하지만, 리액트에서는 에러가 납니다.

• 내용이 없는 태그라면 <input /> 처럼 반드시 닫아주어야 합니다.

5. 주석 (Comments)

JSX 안에서의 주석은 일반적인 JS 주석과 모양이 조금 다릅니다.

• {/* 주석 내용 */}

 

클래스 컴포넌트 vs 함수형 컴포넌트

구분	클래스형 컴포넌트 (Class)	함수형 컴포넌트 (Functional)
선언 방식	class 키워드 사용, React.Component 상속	function 또는 화살표 함수(const) 사용
상태 관리	this.state와 this.setState() 사용	Hooks (useState) 사용
라이프사이클	componentDidMount 등 메서드 활용	Hooks (useEffect) 사용
메모리/성능	비교적 메모리 소모가 큼	메모리 소모가 적고 선언이 간결함
사용 빈도	과거 프로젝트 유지보수 시 사용	현재 리액트의 표준 (강력 권장)

클래스 컴포넌트 

[ClassCom.tsx] 

import { Component } from "react";

class ClassCom extends Component{
    render(){
        return(
            <div>
                클래스형 컴포넌트 
            </div>
        )
    }

}

export default ClassCom

 

• 리액트에세 클래스를 사용하고 싶다면, 리액트가 제공하는 Component라는 클래스의 기능을 그대로 상속받아 사용하여야합니다. 
• render() 메소드는 클래스형 컴포넌트에서 화면에 무엇을 그릴지 결정하는 함수입니다.
  • 함수형 컴포넌트는 함수 자체가 내용을 반환(return)하지만, 클래스형은 반드시 이 render() 함수 안에서 return을 해줘야 합니다. 리액트는 이 render 함수가 뱉어내는 JSX를 보고 화면을 그립니다. 

함수형 컴포넌트

[FuncCom.tsx]

import React from 'react';

function FuncCom()
{
    return (
        <div>
            함수형 컴포넌트 
        </div>
    )
}

export default FuncCom;

[App.tsx]

 

import React from 'react';
import logo from './logo.svg';
import './App.css';
import ClassCom from './ClassCom';
import FuncCom from './FuncCom';

function App() {
  let name = "변수 사용법";

  return (
    <div>
      <ClassCom></ClassCom>
      <FuncCom></FuncCom>
    </div>
  );
}

export default App;