JSX는 무엇입니까? HTML과 어떻게 다릅니 까?-프런트엔드 Q&A-php.cn

JSX는 무엇입니까? HTML과 어떻게 다릅니 까?

JSX 또는 JavaScript XML은 React Library에서 도입 한 JavaScript 언어 구문의 확장입니다. 이를 통해 개발자는 JavaScript 내에 HTML과 같은 코드를 작성할 수 있으므로 UI 구성 요소의 구조와 동작을보다 직관적이고 이해하기 쉽습니다. JSX는 HTML이 아니지만 매우 유사합니다. 대신 브라우저에서 실행되기 전에 JavaScript, 특히 React.createElement() 함수 호출로 변환됩니다.

JSX와 HTML의 주요 차이점은 다음과 같습니다.

Attribute Syntax : JSX에서 속성 이름은 일반적으로 케밥 케이스를 사용하는 HTML과 달리 Camelcase를 사용합니다. 예를 들어, html의 tabindex jsx에서 tabIndex 되고 class className 됩니다.
자체 폐쇄 태그 : JSX는 <br> 와 같이 HTML에 닫는 태그가없는 요소에 대한 자체 폐쇄 태그가 필요합니다. JSX에서는 <br> 를 씁니다.
이벤트 처리기 : JSX에서는 JavaScript 표현식을 이벤트 처리기로 직접 사용할 수 있습니다. 예를 들어, HTML에서 onclick 사용하는 대신 JSX에서 onClick 사용하여 기능을 할당합니다.
사용자 정의 구성 요소 : JSX를 사용하면 내장 HTML 요소만큼 쉽게 사용자 정의 구성 요소를 정의하고 사용할 수 있으므로 코드의 재사용 성과 모듈성을 향상시킬 수 있습니다.
표현식 : JSX는 Curly Braces {} 내에 JavaScript 표현을 포함시켜 동적 컨텐츠 렌더링을 허용합니다. 이 기능은 표준 HTML에서 사용할 수 없습니다.

React 개발에서 JSX를 사용하면 어떤 이점이 있습니까?

React Development에서 JSX를 사용하면 몇 가지 중요한 이점이 있습니다.

가독성 및 유지 가능성 : JSX는 UI의 구조와 그 행동을보다 읽기 쉽고 유지 관리 할 수있게합니다. 마크 업과 논리를 결합하여 개발자는 UI가 같은 장소에서 어떻게 보이고 행동 할 것인지 알 수 있습니다.
성능 : JSX는 렌더링 프로세스를 최적화하는 데 도움이됩니다. JSX가 React.createElement() 호출로 변환되면 React는 변경된 DOM의 일부만 효율적으로 업데이트하고 재 렌더링 할 수 있습니다.
유형 안전 : TypeScript 또는 Flow와 함께 사용될 때 JSX는 구성 요소의 속성 및 어린이에 대한 유형 확인을 제공하여 런타임 오류의 가능성을 줄입니다.
사용자 정의 구성 요소 : JSX는 사용자 정의 구성 요소의 생성 및 사용을 단순화합니다. 표준 HTML 요소만큼 쉽게 구성 요소를 생성하고 사용할 수 있으며, 이는 코드의 모듈성 및 재사용 성을 장려합니다.
JavaScript와의 통합 : JSX 태그 내에 직접 JavaScript 표현을 포함 시키면 마크 업에서 논리를 분리 할 필요없이보다 역동적이고 대화식 UI가 가능합니다.

더 나은 구성 요소 렌더링을 위해 JSX 구문을 JavaScript에 어떻게 통합 할 수 있습니까?

더 나은 구성 요소 렌더링을 위해 JSX 구문을 JavaScript에 통합하려면 다음을 수행하십시오.

빌드 도구 설정 : JSX를 JavaScript로 전환 할 수있는 Babel과 같은 빌드 도구가 필요합니다. @babel/preset-react 로 babel을 구성하여 JSX를 처리하는 방법을 알고 있는지 확인하십시오.
구성 요소 정의 : JSX를 사용하여 React 구성 요소를 정의하십시오. 예를 들어:

1
<code class="jsx">function Welcome(props) { return <h1>Hello, {props.name}</h1>; }</code>
로그인 후 복사

JavaScript 표현을 포함시킵니다 . Curly Braces {} 사용하여 JSX에 JavaScript 표현을 포함시킵니다. 이를 통해 동적 컨텐츠 렌더링이 가능합니다.

1	`<code` `class="jsx">function` `Greeting(props) {` `const` `isLoggedIn = props.isLoggedIn;` `return` `( <div> {isLoggedIn ? ( <welcome name="{props.name}"></welcome> ) : ( <p>Please sign up.</p> )} </div> ); }</code>`

로그인 후 복사

이벤트 핸들러에서 JSX 사용 : JSX 내의 이벤트 핸들러에 JavaScript 함수를 지정하여 대화식 요소를 만듭니다.

1
<code class="jsx">function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); } return ( <a href="#" onclick="{handleClick}"> Click me </a> ); }</code>
로그인 후 복사

이 단계를 수행하면 JSX의 전력을 활용하여 JavaScript 코드 내에서 동적 및 대화식 구성 요소를 완벽하게 생성 할 수 있습니다.

JSX 코드를 효율적으로 작성하고 디버깅하는 데 어떤 도구 나 확장이 권장됩니까?

JSX와 함께 작업 할 때 몇 가지 도구와 확장이 개발 경험을 향상시킬 수 있습니다.

Babel : JSX를 JavaScript로 전환하는 데 필수적입니다. 일반적으로 WebPack 또는 React App과 같은 도구를 사용하여 빌드 프로세스의 일부로 사용됩니다.
eslint-plugin-react 플러그인을 사용한 Eslint :이 도구는 Code 품질을 유지하고 React 및 JSX에 특정한 코드 코딩 표준을 시행하는 데 도움이됩니다.
Visual Studio Code (VS Code) : JSX를 탁월한 인기있는 코드 편집기. 구문 강조 표시 및 개발 경험을 향상시키는 다양한 확장 기능이 제공됩니다.
- 더 예쁘다 : JSX를 지원하는 의견이 많은 코드 포맷터. 일관된 코드 스타일과 서식을 보장합니다.
- React Developer Tools : Chrome 개발자 도구에서 React 구성 요소 계층을 검사 할 수있는 브라우저 확장 (VS 코드 확장으로도 제공).
- JSX 스 니펫 : 자동 완성 공통 React 및 JSX 패턴을 통해 개발 속도를 높이기 위해 코드 스 니펫을 제공하는 확장.
React 앱 생성 : 구성 제로 구성으로 최신 React 프로젝트를 설정하는 CLI 도구. 여기에는 JSX 변환 용 바벨과 상자 밖으로 코드 줄을 제외한 eslint가 포함됩니다.
WebPack : JSX를 전환하기 위해 Babel과 함께 작동하도록 구성 할 수있는 모듈 Bundler. 빌드 프로세스를 최적화하고 종속성을 관리하는 데 유용합니다.