[React] JSX

📚 JSX란 무엇인가요?

JSX는 JavaScript XML의 약자로, 자바스크립트 안에서 HTML과 유사한 문법을 사용할 수 있게 해주는 리액트의 특별한 문법이에요. JSX를 사용하면 UI를 정의할 때 가독성이 높아지고 더 직관적으로 코드를 작성할 수 있어요. 사실 JSX는 자바스크립트의 확장 문법으로, 자바스크립트 코드로 변환돼요. 그 결과, 자바스크립트와 HTML의 장점을 결합한 형태라고 볼 수 있어요.

 

JSX는 자바스크립트와 HTML이 결혼한 것과 같아요. 각각 따로 사용할 수 있지만, JSX를 통해 둘을 함께 사용하면 더 편리하고 강력한 힘을 발휘하게 되죠.

---

🖥️ JSX의 기본 개념과 HTML과의 차이점

1. JSX의 기본 문법

JSX는 HTML과 매우 유사한 구조를 가지고 있지만, 실제로는 자바스크립트 코드의 일부로 처리돼요. 브라우저는 JSX를 직접 이해하지 못하기 때문에, 리액트 컴파일러가 이를 자바스크립트로 변환해줘요. JSX를 사용하면 HTML 태그처럼 보이지만 사실은 리액트 요소를 반환하는 거예요.

// JSX 사용 예시
const element = <h1>Hello, React!</h1>;

이 코드는 JSX 문법을 사용하여 태그를 생성했어요.
하지만 실제로는 자바스크립트 함수 호출로 변환돼서 브라우저에 렌더링돼요.

2. HTML과의 주요 차이점

JSX는 HTML과 비슷하지만 몇 가지 중요한 차이점이 있어요. 이를 알면 JSX를 사용할 때 더 잘 이해할 수 있어요.

a. 자바스크립트 표현식 사용 가능

JSX의 가장 큰 장점 중 하나는 자바스크립트 표현식을 사용할 수 있다는 점이에요. {} 중괄호 안에 자바스크립트 코드를 삽입할 수 있어요. 이를 통해 동적으로 값을 표현할 수 있죠.

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

이 예제에서는 변수 name에 담긴 값을 JSX 안에서 출력하고 있어요.
{} 안에는 어떤 자바스크립트 표현식이든 들어갈 수 있어서, 동적인 콘텐츠 생성이 매우 쉬워요.

b. class 대신 className

HTML에서는 요소에 CSS 클래스를 적용할 때 class 속성을 사용하지만, JSX에서는 className을 사용해요. 이는 자바스크립트에서 class가 예약어이기 때문이에요.

// JSX에서의 클래스명 사용 예시
const element = <div className="container">Hello, React!</div>;

JSX에서는 className을 사용하여 CSS 클래스를 적용해요.
HTML에서는 class를 사용하지만, JSX에서는 충돌을 피하기 위해 className을 사용해야 해요.

c. 속성명에 카멜케이스 사용

JSX에서는 HTML과 달리 속성 이름이 카멜케이스로 작성돼야 해요. 예를 들어, onclick 대신 onClick, tabindex 대신 tabIndex를 사용해요.

// JSX에서 카멜케이스 속성 사용 예시
const button = <button onClick={handleClick}>Click me</button>;

JSX에서는 HTML 속성명을 카멜케이스로 변환해 사용해야 해요.
리액트는 이런 방식으로 속성들을 자바스크립트와 일관되게 처리해요.

d. Self-closing 태그

JSX에서 닫는 태그가 없는 요소는 반드시 Self-closing 태그로 작성해야 해요. 예를 들어, HTML에서 <img>처럼 닫는 태그가 없는 요소는 JSX에서 <img /> 형태로 작성해야 해요.

// JSX에서 self-closing 태그 사용 예시
const image = <img src="image.jpg" alt="example" />;

JSX에서는 닫는 태그가 없는 요소는 항상 self-closing 형태로 작성해야 해요.
이 규칙을 따르지 않으면 오류가 발생할 수 있어요.

e. 조건부 렌더링

JSX에서는 자바스크립트의 조건부 연산자를 사용해 조건부로 요소를 렌더링할 수 있어요. 이는 if문 대신 삼항 연산자를 사용하거나, && 연산자를 통해 조건부 렌더링을 처리할 수 있어요.

const isLoggedIn = true;
const element = <h1>{isLoggedIn ? 'Welcome back!' : 'Please sign in.'}</h1>;

이 예제에서는 isLoggedIn 값에 따라 다른 메시지가 렌더링돼요.
JSX는 자바스크립트 표현식을 사용할 수 있기 때문에, 이런 방식으로 조건부 렌더링을 쉽게 구현할 수 있어요.

---

🤔 JSX의 장점

1. 코드의 가독성 향상

JSX는 HTML과 매우 유사한 구조를 가지고 있기 때문에 UI를 직관적으로 표현할 수 있어요. 자바스크립트 코드와 UI를 하나의 파일에서 함께 관리할 수 있기 때문에, 어떤 부분이 어떤 UI를 생성하는지 쉽게 파악할 수 있죠.

// JSX를 사용한 가독성 높은 코드 예시
const MyComponent = () => {
    return (
        <div>
            <h1>리액트에서 JSX를 사용해요!</h1>
            <p>JSX 덕분에 코드가 더 직관적이에요.</p>
        </div>
    );
};

이 코드에서는 JSX를 사용해 UI 구조를 직관적으로 나타내고 있어요.
HTML과 매우 유사한 형태를 가지고 있기 때문에, UI 요소들을 한눈에 쉽게 이해할 수 있어요.

2. 자바스크립트와의 긴밀한 통합

JSX는 자바스크립트 코드와 자연스럽게 통합될 수 있어요. 예를 들어, {} 안에 변수를 넣거나 자바스크립트 표현식을 사용할 수 있어요. 이를 통해 동적인 UI를 만들 때 매우 유용하죠.

const name = "JSX";
const isReactFun = true;

const MyComponent = () => {
    return (
        <div>
            <h1>Hello, {name}!</h1>
            <p>{isReactFun ? "리액트가 정말 재미있어요!" : "리액트가 어렵네요."}</p>
        </div>
    );
};

이 예제에서는 자바스크립트 변수를 JSX에서 사용하고 있어요.
{} 안에 변수를 삽입하거나 삼항 연산자를 사용해 조건부로 다른 내용을 렌더링할 수 있어요.
자바스크립트와의 통합 덕분에 동적인 UI를 쉽게 구현할 수 있어요.

3. 리액트 요소 반환

JSX는 리액트 요소로 변환돼요. 즉, JSX를 사용하면 UI 요소를 리액트가 이해할 수 있는 자바스크립트 객체로 만들 수 있어요. 이를 통해 컴포넌트를 만들고 재사용하는 것이 매우 쉬워지죠.

const MyButton = () => {
    return <button>Click me!</button>;
};

const App = () => {
    return (
        <div>
            <MyButton />
            <MyButton />
            <MyButton />
        </div>
    );
};

MyButton 컴포넌트는 JSX를 사용하여 리액트 요소로 변환돼요.
이 컴포넌트를 App 컴포넌트에서 여러 번 재사용할 수 있어요. 이렇게 컴포넌트의 재사용성을 높일 수 있어요.

4. HTML과 CSS를 결합한 스타일링 가능

JSX에서는 인라인 스타일링을 통해 HTML과 CSS를 결합할 수 있어요. CSS 객체를 정의하고 JSX 안에서 이를 적용할 수 있기 때문에, 자바스크립트에서 직접 스타일링을 처리할 수 있어요.

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

const MyComponent = () => {
    return <h1 style={style}>JSX에서 인라인 스타일을 적용해요!</h1>;
};

이 예제에서는 CSS 객체를 만들어 style 속성에 적용했어요.
JSX 덕분에 자바스크립트 안에서 직접 CSS 스타일링을 관리할 수 있어, 컴포넌트 단위로 스타일을 관리할 때 매우 유용해요.

5. 타입스크립트와 결합 가능

JSX는 타입스크립트와 결합하여 정적 타입 검사를 지원할 수 있어요. 이를 통해 컴파일 타임에 오류를 미리 발견할 수 있어, 코드의 안정성과 유지보수성이 크게 향상돼요.

interface Props {
    title: string;
}

const MyComponent: React.FC<Props> = ({ title }) => {
    return <h1>{title}</h1>;
};

이 예제에서는 타입스크립트를 사용하여 컴포넌트의 props 타입을 명시하고 있어요.
JSX와 타입스크립트를 결합하면, 코드 작성 시 타입 검사를 통해 오류를 방지할 수 있어요.

---

🚨 주의할 점

JSX를 사용할 때 주의해야 할 몇 가지 사항이 있어요.

1. JSX는 HTML이 아니다: JSX는 HTML과 매우 유사해 보이지만, 자바스크립트의 문법이에요. 따라서, HTML처럼 보이더라도 자바스크립트의 규칙을 따라야 해요. 예를 들어, 자바스크립트 예약어인 class 대신 className을 사용해야 하는 것처럼 말이죠.
2. JSX 내에서는 한 번에 하나의 부모 요소만 반환 가능: JSX에서는 반드시 하나의 부모 요소만 반환할 수 있어요. 여러 요소를 반환하려면, Fragment(또는 <></>)로 묶어서 반환해야 해요.

// 올바른 JSX 반환 예시
return (
  <>
    <h1>Title</h1>
    <p>This is a paragraph.</p>
  </>
);

여러 요소를 JSX에서 반환하려면 반드시 하나의 부모 요소로 묶어야 해요.
이 때, Fragment를 사용하면 불필요한 DOM 요소를 추가하지 않고도 여러 요소를 그룹화할 수 있어요.

3. 조건부 렌더링 시 명확한 논리 필요: JSX에서 조건부 렌더링을 사용할 때, 표현식이 null이나 undefined 값을 반환할 수 있어요. 이러한 값을 렌더링하지 않도록 주의해야 해요.

---

📖 결론

JSX는 리액트에서 자바스크립트와 HTML의 장점을 결합한 특별한 문법으로, UI를 직관적이고 동적으로 정의하는 데 중요한 역할을 해요. HTML과 유사하지만, 자바스크립트의 확장 문법으로 자바스크립트 표현식을 사용하고, 속성명과 클래스명을 다르게 사용해야 한다는 점에서 차이가 있어요.

 

JSX를 통해 리액트 컴포넌트는 더 가독성이 높고, 동적인 UI를 쉽게 생성할 수 있어요. 또, JSX를 잘 활용하면 코드의 재사용성과 유지보수성이 크게 향상되며, 가독성 높은 동적인 UI를 쉽게 구현할 수 있어요.

---

🔗 추가 정보

• JSX에 대한 더 깊은 이해를 원하신다면, 리액트 공식 문서에서 자세한 정보를 찾아볼 수 있어요.