리액트 컴포넌트 확장자 .js 와 .jsx의 차이점

컴포넌트 확장자

리액트에서 컴포넌트를 만들 때 어떤건 확장자가 .jsx이고 어떤건 .js일 때도 있었다. 무엇을 쓰는게 더 나은지 둘의 차이점은 무엇인지 알아보자.

JSX란?

우선 JSX는 JavaScript XML의 약자로 JavaScript를 확장한 문법이다. 자바스크립트에서 HTML 문법을 사용할 수 있다. 공식 문서에서 설명하기로는 UI 관련 작업을 위해 권장이 되며 React에서 에러, 경고 메세지를 표시해준다고 한다.

JSX 코드

// JSX
render() {
  return (
    <TestButton>
        Click here
    </TestButton>
   )
}

위의 JSX 코드는 자바스크립트 컴파일러인 @babel을 통해 javascript로 변환된다.

JS 코드

// JS
React.createElement(
	"button",
  {className: "sidebar"}
)

리액트에서는 JSX를 자바스크립트로 변환하기 때문에 javascript 문법을 사용하기 위해선 따로 mark를 해줘야 한다. 따라서 JavaScript를 JSX 내부에서 사용할 때에는 중괄호를 사용해야 한다.

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

중괄호로 감싼 JSX안에 변수 name을 사용하였다. 삼항연산자, map 등을 사용할 때에도 마찬가지이다. 이처럼 중괄호 안에 다양한 자바스크립트 표현식을 담을 수 있다.

📌 .js vs .jsx

이 두 확장자의 기능차이는 없다.

리액트로 작성한 코드는 최종적으로는 자바스크립트로 번역이 되기 때문에 리액트 코드가 .js 파일이냐 .jsx 파일이냐는 크게 중요하지 않다. (둘다 일종의 텍스트 파일이라고 보면 된다.)

가끔 jsx문법을 쓰는 컴포넌트용 파일임을 표기하기위해 .jsx를 붙이는 경우가 있는데

딱 그런용도일 뿐이고 쓸지말지는 팀별로 협의하여 사용하면 된다.

정리하면

컴포넌트 파일을 만들어 사용하는 리액트의 JSX 관련 코드는 .jsx로 만들고 나머지 일반 JavaScript 코드들은 .js로 만들면 된다.

참고1: https://velog.io/@realzu/.js%EC%99%80-.jsx-%EC%B0%A8%EC%9D%B4
참고2: https://codingapple.com/forums/topic/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%83%9D%EC%84%B1-%ED%99%95%EC%9E%A5%EC%9E%90/