JSX는 JavaScript XML의 약어로, JavaScript를 확장한 문법을 말합니다. JavaScript 파일을 HTML과 비슷하게 마크업을 작성할 수 있도록 해줍니다. 컴포넌트를 작성하는 다른 방법도 있지만, 대부분의 React 개발자는 JSX의 간결함을 선호하며 대부분의 코드 베이스에서 JSX를 사용합니다.
<aside> 💡 강의교안
짐코딩 강의 특징은 정확한 정보를 제공하기 위해 공식문서를 기반으로 제공해요! 💪
</aside>
Web은 HTML, CSS, JavaScript를 기반으로 이루어져 있으며, HTML 콘텐츠의 구조를 정의하고, CSS로 디자인을, JavaScript로 로직을 작성해 왔습니다. 보통은 HTML, CSS, JavaScript를 분리된 파일로 관리합니다!
HTML
JavaScript
그러나 Web이 더욱 인터랙티브해지면서, 로직이 내용을 결정하는 경우가 많아졌습니다. 그래서 JavaScript가 HTML을 담당하게 되었죠! 이것이 바로 React에서 렌더링 로직과 마크업이 같은 위치에 함께 있게 된 이유입니다. 즉, 컴포넌트에서 말이죠.
Sidebar.js React 컴포넌트
Form.js React 컴포넌트
<aside> 💡 중요합니다
JSX와 React는 서로 다른 별개의 개념입니다. 종종 함께 사용되기도 하지만 독립적으로 사용할 수도 있습니다. JSX는 확장된 문법이고, React는 JavaScript 라이브러리입니다.
</aside>
<aside>
💡 확장자 .js vs .jsx
리액트 컴포넌트를 정의할 때 확장자를 .js 또는 .jsx로 할 수 있는데요. 결론부터 말씀드리면 파일 확장자에 대한 차이는 없습니다. 하지만 리액트 컴포넌트를 만들때 우리는 JSX(JavaScript XML)문법을 사용하고 그 안에서 HTML을 사용합니다. 그렇기 때문에 순수 자바스크립트는 .js 그리고 JSX를 사용하는 리액트 컴포넌트에는 .jsx를 사용하는 것을 권장드립니다. (개인생각, 팀마다 다를 수 있음)
만약 타입스크립트를 사용하는 경우 .ts vs .tsx 확장자를 사용하시면 됩니다.
</aside>
<aside>
💡 Vite 리액트 컴포넌트 확장자 .jsx
Vite는 파일 확장자에 따라 해당 파일을 어떻게 처리할지 결정합니다. 리액트 컴포넌트에 JSX 문법이 포함되어 있으면 Vite는 이를 올바르게 파싱하고 변환하기 위해 파일 확장자가 .jsx 또는 .tsx인지를 확인합니다.
App.jsx 파일을 App.js로 변경하면 Vite는 이 파일을 일반 JavaScript 파일로 인식하고, JSX 문법을 올바르게 처리하지 못하게 됩니다. 이로 인해 다음과 같은 에러가 발생하는 것입니다
Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
콘텐츠에 잘못된 JS 구문이 포함되어 있어 가져오기 분석을 위한 소스를 구문 분석하지 못했습니다. JSX를 사용하는 경우 파일 이름을 .jsx 또는 .tsx 확장자로 지정해야 합니다.
</aside>
한 컴포넌트에서 여러 엘리먼트(또는 컴포넌트)를 반환하려면, 하나의 부모 태그로 감싸줘야 합니다.
예를 들면, 다음과 같이 <div>를 사용할 수 있습니다.