[react] jsx란?

JSX란?

JSX는 JavaScript XML의 약자로, 자바스크립트에 XML과 유사한 문법을 추가하여 UI를 더욱 직관적으로 작성할 수 있도록 해주는 확장 문법으로 주로 React와 같은 JavaScript 라이브러리에서 사용되며, HTML과 비슷한 문법으로 UI를 구성할 수 있다는 장점을 가짐.

 

 

왜 JSX를 사용할까?

• HTML과 유사한 문법으로 UI를 작성하기 때문에, 개발자가 UI를 쉽게 이해하고 작성
• JSX 안에 JavaScript 표현식을 직접 삽입하여 데이터를 동적으로 표현
• UI 요소를 독립적인 컴포넌트로 만들어 재사용성을 높여서 코드 관리 용이

 

JSX 특징은?

• JSX는 자바스크립트 표현식으로 결국 자바스크립트로 컴파일되어 실행
• JSX 안에서 중괄호({}) 안에 JavaScript 표현식을 삽입할 수 있음. (예: 변수 값, 함수 호출 결과 등)
• JSX는 React.createElement 함수를 사용해 JavaScript 객체로 변환
• 사용자 정의 컴포넌트로 만들 수 있음.

 

기본 예시

아래의 코드는 <h1> 태그 안에 "Hello, world!"라는 문자열을 포함하는 JSX 요소를 생성함.

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

 

 

JSX의 장점은?

• UI와 로직의 분리: UI와 JavaScript를 명확하게 분리하여 코드를 더욱 체계적으로 관리
• HTML과 유사한 문법으로 UI를 작성하기 때문에 개발 속도 향상
• TypeScript와 함께 사용하면 JSX에서도 강력한 타입 검사 수행

 

결론

JSX는 React와 같은 프레임워크에서 UI를 개발할 때 매우 유용한 도구로써 HTML과 유사한 문법으로 직관적인 UI를 작성하고, JavaScript와의 통합을 통해 동적인 웹 애플리케이션을 개발할 수 있음.

 

 

 

 

 

[이벤트] 오늘부터 딱 3주, 매일 글쓰기 도전! 오블완 챌린지 오픈 🎉