[React] JSX 란?!

얼마 전까지 Vanila JS 만을 고수하던 나이기에 React를 시작할 때 JSX 언어는 너무 생소했다

새로운 개념을 다시 적립한다는 것이 받아들이기 힘든 현실이지만 JSX 는 React 를 하기 위해서 필수적인 개념이기에 이번 글에서 다뤄보려한다.

JSX는 Javascript 내에서 XML 과 유사한 문법을 사용할 수 있도록 도와준다. 그렇지만 사용하다 보니 생소한 문법과 사용법이 미묘하게 다르기에 이 글에서는 React 비기너들을 위해 !!

JSX의 기본 개념과 꼭 지켜야 하는 주요 문법에 대해서 정리해보도록 하겠다.

 

 JSX의 기본 개념 

JSX는 JavaScript 코드 내에서 HTML과 유사한 구조를 작성할 수 있는 문법 확장이다.

1. UI를 선언적으로 표현할 수 있다. 

const element = <h1>Hello, JSX!</h1>;

2. JSX 코드는 Babel에 의해 JavaScript 코드로 변환된다.

const element = React.createElement("h1", null, "Hello, JSX!");

 

JSX의 주요 문법

1. 반드시 하나의 부모 요소로 감싸야 함 

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

 

 ❌ 오류 발생 코드:

return (
    <h1>Hello</h1>
    <p>JSX</p>
);

 

✅ 올바른 코드:

return (
    <div>
        <h1>Hello</h1>
        <p>JSX</p>
    </div>
);

또는 React의 Fragment를 사용할 수도 있다. 

return (
    <>
        <h1>Hello</h1>
        <p>JSX</p>
    </>
);

 

2.JavaScript 표현식 사용

중괄호 {} 를 사용하여 JavaScript 표현식을 JSX 내부에 삽입할 수 있다. 

const name = "React";
const element = <h1>Hello, {name}! </h1>;

보통 데이터 바인딩의 경우 {} 를 꼭 사용해주어야 한다. 

여기서 데이터 바인딩(Data Binding)이란? 

데이터 바인딩(Data Binding) 은 프로그래밍에서 UI(사용자 인터페이스)와 데이터(모델)를 연결하는 기술이다. 이를 통해 데이터가 변경되면 UI도 자동으로 업데이트되도록 만들 수 있다.

 

3. 속성(Attribute) 적용

JSX에서는 HTML 속성과 유사하지만, camelCase 표기법을 사용해야 한다.

const element = <button onClick={handleClick}>Click me</button>;

class -> className

for -> htmlFor

그리고 JSX 문법에서는 JavaScript와 다른 점이 class 는 className , for 는 htmlFor 로 써줘야만 한다. 

 

4. 조건부 렌더링 **

JSX 에서는 조건부 렌더링을 위해 삼항 연산자 또는 && 연산자를 사용할 수 있다. 

cont isLoggedIn = true;
const element = isLoggedIn ? <h1>Welcome</h1> : <h1>Please log in</h1>;

&& 연산자를 사용하면 조건이 true 일 때만 특정 요소를 렌더링할 수 있다. 

const message = isLoggedIn && <h1>Welcome</h1>;

 

5. 리스트 렌더링

배열의 map()을 사용하여 리스트를 동적으로 생성할 수 있다. 

const items = ["Apple", "Banana", "Cherry"];
const list = (
    <ul>
        {items.map((item, index) => <li key={index}>{item}</li>)}
    </ul>
);

여기서 주의해야 할 점은 key 속성을 부여하여 React가 각 항목을 고유하게 식별할 수 있도록 해야한다. 

 

6.인라인 스타일 적용

JSX에서는 스타일을 객체 형태로 작성하며, CamelCase를 사용한다. 

const style = {
    color: "blue",
    fontSize: "20px"
};

const element = <h1 style={style}>Styled Text</h1>;

본래의 JavaScript에서는 font-size 였던 것이 fontSize가 된 것을 확인해 볼 수 있다. 

 

7. 이벤트 처리

React에서 이벤트 핸들러는 onClick, onChange 등의 속성을 사용하며, 함수 참조를 전달해야 한다. 

function handleClick() {
    alert("Button clicked!");
}

const button = <button onClick={handleClick}>Click me</button>;

 

 

마무리

이번 글에서는 JSX 의 문법에 대해서 자세하게 알아보았다. JSX는 React의 핵심적인 요소이며, 이를 잘 활용하면 가독성이 좋은 UI 코드를 작성할 수 있으니 개념부터 잘 다지고 문법들을 하나 둘 공부하고 React에서 활용할 수 있는 개념들을 학습해나가면 좀 더 편하게 멋있는 프로그램들을 개발할 수 있을 것이다. React 마스터 까지. 화이팅.