- JSX는 JavaScript XML의 약자로, React에 의해 도입된 JavaScript의 문법 확장입니다. React 컴포넌트의 구조를 쉽게 이해하고 작성할 수 있도록 HTML과 비슷한 구조를 갖고 있습니다.
- 기본적으로 JSX는 JavaScript 코드 안에서 HTML 태그를 사용할 수 있게 해주는 문법입니다. JSX를 이용하면, JavaScript 코드 안에서 직관적으로 DOM 요소를 생성하고 관리할 수 있습니다.
- 예를 들어, 아래와 같은 JSX 코드를 보면, HTML 태그를 사용해 React 컴포넌트를 작성하고 있는 것을 볼 수 있습니다.
- jsx
- const Element = () => {
- return (
- <div>
- <h1>Hello, World!</h1>
- </div>
- );
- };
- export default Element;
- 이 코드는 Element라는 React 컴포넌트를 정의하고 있습니다. 이 컴포넌트는 "Hello, World!"라는 텍스트를 포함하는 h1 엘리먼트와 그 h1 엘리먼트를 감싸는 div 엘리먼트를 반환합니다.
- 따라서 JSX는 React의 구조를 이해하고 작성하는데 도움을 줍니다. 하지만, 실제로 웹 브라우저는 JSX를 이해하지 못하기 때문에, 이를 웹 브라우저가 이해할 수 있는 JavaScript 코드로 변환하는 작업이 필요하며, 이 작업은 보통 Babel과 같은 도구를 사용해서 수행됩니다.
"Component.js"와 "global.js"는 JavaScript 파일일 가능성이 높습니다. JavaScript는 웹 페이지에 동적인 요소를 추가하기 위해 사용되는 프로그래밍 언어입니다.
- "Component.js": 이 파일은 보통 웹 페이지에서 재사용 가능한 구성요소(component)를 정의하는데 사용됩니다. 예를 들어, React.js나 Vue.js와 같은 프런트엔드 라이브러리에서는 각각의 UI 부분을 컴포넌트로 나누어 관리합니다.
- "global.js": 이 파일은 보통 웹 애플리케이션 전체에서 공유되는 자바스크립트 코드를 포함합니다. 이 파일 안에는 여러 페이지에서 재사용될 수 있는 함수나 변수, 이벤트 핸들러 등을 정의할 수 있습니다. 그래서 이 파일을 포함시키면 여러 페이지에서 이 파일에 있는 코드를 사용할 수 있게 됩니다.
물론, 이런 이름을 가진 파일들의 정확한 내용은 프로젝트의 규모나 사용된 기술, 그리고 개발자의 개인적인 코드 구조화 스타일에 따라 다를 수 있습니다. 그래서 두 파일의 실제 내용을 알아보려면 직접 코드를 열어봐야 합니다.
'UIUX Full-Stack Developer' 카테고리의 다른 글
[0801] 깃허브 하우바츄 (0) | 2023.08.01 |
---|---|
[0731] 자바스크립트 DAY11 (1) | 2023.07.31 |
[0731] GITHUB / FIGMA To VSCode (0) | 2023.07.31 |
[0730] 스프링부트 SPRINGBOOT 개념정리 (0) | 2023.07.30 |
[0728] 자바스크립트 DAY10 (0) | 2023.07.28 |