[React] 리액트 JSX

리액트(JSX)의 사용 용도와 주요 기능, 그리고 동작 방식

리액트(JSX)는 페이스북에서 개발된 JavaScript 라이브러리인 React의 필수 요소로, 사용자 인터페이스를 구축하는 데 사용됩니다. JSX는 JavaScript 코드를 HTML과 같은 구문으로 작성할 수 있게 해주어 코드 작성과 이해를 쉽게 합니다.

1. JSX의 사용 용도

JSX는 다음과 같은 용도로 주로 사용됩니다:

• DOM 조작: JSX를 통해 HTML 요소들을 직접 조작할 수 있으며, 이를 통해 React 컴포넌트의 UI를 정의합니다.
• 가독성 향상: HTML과 유사한 구문을 사용함으로써 코드를 보다 직관적으로 이해할 수 있습니다.
• React 컴포넌트 생성: React에서 컴포넌트를 정의할 때 JSX를 사용하여 코드 작성이 편리하고 효율적입니다.

2. 주요 기능

JSX는 다양한 기능을 제공하며, 그 중 주요 기능은 다음과 같습니다:

• 태그와 속성: JSX는 HTML과 유사한 태그와 속성을 사용하여 간단하게 UI를 구성할 수 있습니다.
• JavaScript 표현식 사용: JSX 내에서 중괄호 {}를 사용하여 JavaScript 표현식을 삽입할 수 있습니다.
• 컴포넌트 및 요소 중첩: 컴포넌트와 HTML 요소를 중첩하여 복잡한 UI를 구성할 수 있습니다.
• 조건부 렌더링: JavaScript 조건문을 사용하여 JSX 내에서 조건부 렌더링을 쉽게 구현할 수 있습니다.

3. 동작 방식

JSX는 JavaScript 코드로 변환된 후 브라우저에서 실행됩니다. 다음은 JSX의 기본 동작 방식입니다:

• 컴파일: JSX 코드는 Babel 등의 컴파일러를 사용하여 순수 JavaScript 코드로 변환됩니다.
• 가상 DOM: 변환된 JavaScript 코드는 React의 가상 DOM을 통해 실제 DOM과 동기화됩니다.
• 성능 최적화: 가상 DOM을 사용하여 최소한의 변경 사항만 실제 DOM에 적용함으로써 성능을 최적화합니다.

코드 예제

다음은 간단한 JSX 코드 예제입니다:

const Home = () => {

    return (

        <>

            <h1> Home Page</h1>

        </>

    )

}

export default Home;

 

위 코드에서는 Home.jsx 파일을 사용하여 "Home Page"라는 문자열이 브라우저 최상단 화면에 표시되도록 합니다.

 

 

JSX 주의 사항

1. 중괄호 내부에는 자바스크립트 표현 식만 올 수 있다.
2. 표현 식은 값으로 평가될 수 있는 식을 말한다. if문, for문이 올 수 없다. 단, 삼항 연산자는 사용할 수 있다.
3. 숫자, 문자열, 배열 값만 랜더링 된다.
4. 모든 태그는 닫혀있어야 한다.
5. 최상위 태그는 반드시 하나여야 한다. (<></>)