작성한 질문수 66

1

React 프로젝트에서 .jsx와 .js 확장자의 차이는 주로 파일의 목적과 내용에 따라 구분됩니다:

전통적인 웹 개발과의 비유

전통적인 웹 개발에서는:

1. HTML: 웹페이지의 구조와 콘텐츠를 정의합니다. 버튼, 텍스트, 이미지 등 "무엇을" 보여줄지 결정합니다.

2. CSS: 웹페이지의 스타일과 레이아웃을 담당합니다. 색상, 크기, 배치 등 HTML 요소가 "어떻게 보일지" 결정합니다.

3. JavaScript (.js): 웹페이지의 동작과 기능을 담당합니다. 사용자 상호작용, 데이터 처리 등 "어떻게 작동할지" 결정합니다.

React 프로젝트에서는:

.jsx 확장자

• 주로 JSX 문법을 포함하는 React 컴포넌트 파일에 사용합니다.

• HTML과 JavaScript가 결합된 형태로, HTML의 구조적 역할과 JavaScript의 동적 기능이 하나의 파일에 있습니다.

• 시각적 UI 요소를 렌더링하는 컴포넌트에 적합합니다.

• 전통적인 웹 개발의 HTML과 JavaScript의 일부 역할이 합쳐진 것과 같습니다.

.js 확장자

• 일반 JavaScript 로직만 포함하는 파일에 주로 사용합니다.

• API 호출, 유틸리티 함수, 상수 정의, 서비스 로직 등에 적합합니다.

• JSX를 사용하지 않는 순수 JavaScript 파일입니다.

• 전통적인 웹 개발의 JavaScript와 유사한 역할을 합니다.

캔버스 프로젝트의 경우

캔버스 프로젝트에서 api 폴더의 canvas.js와 http.js 파일은 다음과 같은 이유로 .js 확장자를 사용했을 것입니다:

• 이 파일들은 UI 컴포넌트가 아닌 API 통신 로직이나 HTTP 요청을 처리하는 코드를 포함합니다.

• JSX를 사용하지 않고 순수 JavaScript 함수나 객체만 포함합니다.

• 서비스 로직, 데이터 페칭, API 엔드포인트 정의 등의 목적을 가진 파일입니다.

   

이 프로젝트에서는 "JSX를 포함하는 컴포넌트는 .jsx로, 순수 로직 파일은 .js로" 구분하는 컨벤션을 따르고 있는 것으로 보입니다. 이는 코드의 목적을 파일명만으로도 쉽게 파악할 수 있게 해주는 좋은 실천 방법입니다.