JSX란 무엇일까? 🤔

안녕하세요~   요즘 날씨가 쌀쌀하죠?🥶🥶  저도 역시 추위를 많이 타서 그런지 춥게 느껴집니다. 여러분들도 따뜻하게 입으시고 감기 조심하세요!! 

 

그럼 이번시간에는 JSX가 무엇인지, JSX의 역할, 사용하는 이유, 장점과 단점, 간단한 사용방법에 대해 간략하게 이해하기 쉽도록  예시를  들어서 설명해드리겠습니다. 


JSX 
JSX는 JavaScript  +  XML의 약자로, React에서 UI를 더 직관적이고 간편하게 작성할 수 있게 해주는 확장한 문법 입니다. 쉽게 말해서  "HTML과 자바스크립트를 하나의 문법으로 섞어서 사용할 수 있게 해주는 것" 이렇게 생각하시면 더 쉽게 이해하실 수 있습니다. 


JSX의 역할은? ✍️
다음은 JSX의 대표적인 역할 4가지입니다.



그럼 이 JSX라는 문법을 왜 사용하나? 🤔🤔  
저의 답변은
JSX 문법은 React 개발에서 UI를 직관적으로 표현하는데 필수적인 요소이기   때문에 사용된다고 생각합니다.

많은 이유도 있지만 대표적인 이유 4가지를 들어보겠습니다. 


✅뛰어난 가독성과 높은 생산성
✅강력한 타입 체킹 
✅직관적인 UI 구성
✅React 생태계와의 완벽한 호환 

JSX의 장점과 단점을 알아봅시다!! 

JSX의 장점

1️⃣ 간결한 코드 

2️⃣ 가독성 향상 

3️⃣ injection Attacks 방어 (보안성 향상)

 

JSX의 단점

1️⃣ 컴파일 과정 -  JSX 코드는 브라우저가 직접 이해할 수 없기 떄문에 , Babel과 같은 트랜스파일러를 통해 일반 자바스크립트 코드로 변환해야 한다

2️⃣ 성능 오버헤드 - JSX 코드를 자바스크립트 코드로 변환하는 과정에서 약간의 성능 오버헤드 발생

3️⃣ React 생태계에 종속 - React 이외의 환경에서는 사용이 제한

JSX 사용방법을 소개로 마무리하겠습니다.

다음 예시를 보면 HTML 요소인 <h1> 태그를 자바스크립트 코드안에 직접 작성된 것을 볼 수 있습니다. 

const Example = <h1>JSX 코드 사용방법</h1>;

이 코드는 h1 태그 안에 " JSX 코드 사용방법 " 이라는 문자열을 렌더링 하는 JSX 요소라고 설명할 수 있습니다.

그리고 또한 중괄호  {   } 를 사용하여 자바스크립트 변수를 참조 할 수 있습니다. 

const name = '메리 크리스마스~'
const Example = <h1>여러분,{name}</h1>;

마지막으로 중괄호를 이용한 자바스크립트 함수를 호출 예시입니다.

function getGreeting() {
    return '안녕하세요!';
}

const element = <h1>{getGreeting()}</h1>;

 

이렇게 JSX 코드에서 변수를 참조하고, 함수를 호출할 수 있습니다. 감사합니다 !!