[Vue] TSX Component 사용 방법

[Vue] TSX Component 사용 방법

JSX/TSX의 유래는 잘 모른다.

아마 React에서 조금 더 html 태그들을 script처럼 사용할 수 있도록 만든 파일 형식으로 보인다.

React를 제대로 배운 적은 없지만 Vue.js의 SFC인 .vue 파일 형식이 존재하는 것과 같은 맥락이겠지.

환경

@vue/cli로 생성한 typescript 기반 vue project

특별한 설정을 더한 것은 없음.

아마 tsconfig.json에 jsx: preserve 설정이 필요할 텐데 기본값으로 되어 있다.

Typescript를 주로 사용하게 되면서 오히려 JSX 설정은 잘 모르나 거기서 거기일 것으로 보인다.

우선 Compiler가 이해할 수 있도록 babel plugin을 등록해줘야 한다.

# terminal에서 필요한 모듈 설치 $ npm install --save-dev @vue/babel-plugin-jsx # npm i -D @vue/babel-plugin-jsx

// babel.config.js module.exports = { presets: ['@vue/cli-plugin-babel/preset'], // @vue/cli가 알아서 해주는 설정 plugins: ['@vue/babel-plugin-jsx'], // jsx/tsx 사용할 수 있는 plugin 등록 };

설정은 저게 전부다. 다음은 tsx 파일을 작성하는 방법이다.

tsx로 만든 컴포넌트는 *.vue 형식이 아닌 *.tsx 형식으로 생성한다.

// tsx-component.tsx import { defineComponent } from 'vue'; export default defineComponent({ setup() { const message = 'Hello TSX Component!!!'; return () => { message }; } });

주의할 점은 rendering을 위해 setup에서 함수를 반환해야 한다.

Tistory가... 아니고 스타일링 해주는 플러그인이 JSX/TSX 문법을 제대로 이해하지 못하는데, gist도 첨부한다.

가져다 쓰는 경우에는 특별할 게 없다 그냥 *.vue 대신 *.tsx로 import 해서 사용한다.

*.vue 형식이 아니더라도 Vue.js 2부터 학습을 했다면,

js 파일 안에서 vue component를 생성해서 학습을 했을 수 있다.

비슷한 맥락으로 사용하는 방법이라고 볼 수 있는데,

Vue.js 2에서는 template 옵션 안에 문자열로 html 태그들을 담았다.

또는 render()를 통해 template을 그렸다.

나는 vue를 처음부터 sfc 방식으로 시작해서 오히려 헷갈리는 부분들이 많다.

React도 그냥 아주 간단한 예제만 다뤘기 때문에 JSX/TSX는 존재 정도만 알고 있었다.

그렇다면 tsx를 왜 쓸까? 마땅한 이유는 없지만, JSX/TSX의 경우에는 순수 JS/TS 파일에 가깝다.

*.vue 방식으로 프로젝트를 관리하는 장점이 많지만,

component를 독립적으로 관리할 경우나 라이브러리처럼 사용하려면 vue-loader로 일일이 컴파일하는 건 힘들 수 있다.

그래서 사용하는 건가?

아무튼 현재로썬 vue를 framework가 아닌 library로서 사용하기 위한 수단 정도로 보인다.

from http://jihogrammer.tistory.com/98 by ccl(A) rewrite - 2021-12-26 17:01:40