본문 바로가기

UIUX Full-Stack Developer

[0731] JS / JSX

  • 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": 이 파일은 보통 웹 애플리케이션 전체에서 공유되는 자바스크립트 코드를 포함합니다. 이 파일 안에는 여러 페이지에서 재사용될 수 있는 함수나 변수, 이벤트 핸들러 등을 정의할 수 있습니다. 그래서 이 파일을 포함시키면 여러 페이지에서 이 파일에 있는 코드를 사용할 수 있게 됩니다.

물론, 이런 이름을 가진 파일들의 정확한 내용은 프로젝트의 규모나 사용된 기술, 그리고 개발자의 개인적인 코드 구조화 스타일에 따라 다를 있습니다. 그래서 파일의 실제 내용을 알아보려면 직접 코드를 열어봐야 합니다.