JSX (JavaScript XML)이 뭔가요

<JSX 이란?>

React JSX는 JavaScript XML의 약자로, JavaScript와 함께 HTML 코드를 작성하고 createElement() 및 appendChild() 메서드 없이 DOM에 배치하는 데 사용됩니다. JSX를 사용하면 템플릿 언어와 같은 방식으로 더 적은 코드 줄 수로 재사용 가능한 UI 컴포넌트를 쉽게 생성할 수 있으며, JavaScript의 강력함을 함께 활용할 수 있습니다.

 

**JSX를 사용하는 것은 필수가 아니지만, React 프로그래밍에서는 강력히 권장됩니다. JSX를 사용하면 코드를 더 쉽게 작성하고 읽을 수 있어 개발 과정이 보다 수월해지기 때문입니다.

 

<JSX 사용하는 이유?>

• JSX는 일반 JavaScript로 반환되는 과정에서 최적화를 수행하기 때문 더 빠릅니다
• JSX를 통해 템플릿을 쉽게 작성할 수 있습니다
• JSX는 표현식이기 때문에 if문과 for 루프 내에서 사용할 수 있으며, 변수에 할당하거나 인수로 전달하거나 함수에서 반환할 수도 있습니다.
• JSX는 기본적으로 삽입된 값을 이스케이프 처리하여 주입 공격을 방지합니다

<JSX Syntax>

HTML 구조와 유사하지만 조금씩 다른 점들이 있습니다.

• 셀프 클로징 태그 : XML과 마찬가지로 요소에 자식이 없는 경우 반드시 "/>"로 닫아야 합니다.

 

• 속성 이름의 카멜 케이스 (CamelCase) : JSX에서는 HTML에서 사용하는 하이픈(-)이 포함된 속성 이름 대신 카멜 케이스를 사용합니다.

 

• 중괄호를 사용한 동적 콘텐츠 : 중괄호 안에 JavaScript 표현식을 삽입할 수 있습니다.

 

<JSX 표현식>

• JSX의 가장 강력한 기능 중 하나는 중괄호 {}를 사용하여 코드 내에 JavaScript 표현식을 직접 삽입할 수 있는 능력입니다.

JSX 표현식 예시

 

• JSX는 if문과 for 루프 내에서 사용할 수 있으며, 변수에 할당하거나 인수로 전달하거나 함수에서 반환할 수 있습니다.

if문과 for 루프 사용한 예시

 

• 속성 값 지정 하기 : JSX에서는 두 가지 방법으로 속성 값을 지정할 수 있습니다
  1. 문자열 리터럴 : 속성 값을 큰따움표를 사용하여 하드코딩된 문자열로 지정할 수 있습니다.

문자열 리터럴 예시

       2. 표현식 : 중괄호 {}를 사용하여 속성을 표현식으로 지정할 수 있습니다

표현식 예시

 

• JSX로 자식 요소 지정하기 : 모든 태그를 하나의 부모 태그로 감싸고, 이 부모 요소를 HTML에 렌더링합니다

JSX 자식 요소

 

• JSX와 컴포넌트 : 각 JSX 요소는 <얖>와 같은 내장 컴포넌트 사용자 정의 컴포넌트이든 React 컴포는로 변환됩니다

JSX 컴포넌트

 

• JSX와 props : React에서 props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다. Props는 읽기 전용이며, 컴포넌트를 재사용할 수 있도록 도와줍니다

JSX와 props

 

참고 자료 :

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

Introducing JSX – React

https://www.geeksforgeeks.org/reactjs-jsx-introduction/

React JSX - GeeksforGeeks

https://codedamn.com/news/reactjs/what-is-jsx-why-react-js-uses-jsx

What is JSX? Why React.js uses JSX?