Vue3+TSX 권장 사항

개시하다

너 이거 왜 하고 싶어?
여기까지.
그때 라인의 이쪽 팟캐스트가 TL로 흘러 올라와서 도전을 해봤어요.
https://uit-inside.linecorp.com/episode/82
이 기사는 토도 애플리케이션을 소재로 삼아 Vue3에서 TSX에 나온 제 개인적인 기술 방법과 소감 등을 담았다.
https://v3.vuejs.org/api/composition-api.html#setup
공식 홈페이지를 봤자 리액트처럼 쓰는 게 아니어서 잘 안 맞아서 혼자 썼어요.
기본적인 쓰기 방법은 결과의 코드를 참고하세요.
결과는 다음과 같다.
https://github.com/shippokun/todo-vue3
기본적인 구조에 관하여 본문을 참고하여 제작하다.늘 당신의 보살핌을 받았습니다.

메시지

묘사 방법

사용Composition-APIsetup에서 되돌아오기RenderFunction.

import { defineComponent, ref } from 'vue';
import { TestComponent } from './test.component.tsx'

export default defineComponent({
  components: { TestComponent },
  setup() {
    const test = ref('test');
    const changeFuga = () => {
      test.value = 'fuga'
    };
    
    return () => (
      <div>
        <TestComponent test={test.value} changeFuga={changeFuga} />
      </div>
    );
  }
})

이런 유형의 은혜를 최대한 누리기 위해emits 모두 props로 대체했다.
또한 props 모두 대체를 통해 부모 구성 요소에서 서브 구성 요소를 호출할 때 유형 검사를 하기 쉽다.
나는 props의 릴레이도 아무런 문제가 없다고 생각한다.

import { defineComponent, PropType } from 'vue';
import { Todo, TodoUpdateDto } from '@/models'

interface Props {
  todo: Todo | null;
  onUpdate: (id: string, todo: TodoUpdateDto) => void;
};

export const TodoEditComponent = defineComponent({
  name: 'TodoEditComponent',
  props: {
    todo: {
      type: Object as PropType<Props['todo'],
      default: null,
    },
    onUpdate: {
      type: Function as PropType<Props['onUpdate'],
      required: true,
    },
  },
  setup(props: Props) {
    // propsに型がついているので、型の補完が効く
    ...
  }
});

지금까지template에 사용된 은밀한 전개 주의

props

ref의value

매번 기술해야 하지만 형식적인 은혜가 있기 때문에 그리 신경 쓰지 않는다.

막힌 곳

SFC의template에 적힌 것을 모두 TSX로 옮길 때 몇 가지 문제가 발생했기 때문에 해결된 것과 해결되지 않은 것을 분리해서 소개한다.

해결됨

vue-router <router-view> 및 <router-link>

이는 각각 vue-router 제공RouterView과 RouterLink으로 대체됐다.

import { RouterLink, RouterView } from 'vue-router';

export default defineComponent({
  setup() {
    return () => (
      <div>
        <RouterView />
	<RouterLink to={{ path: '/todos', query: { completed: "true" } }} >
	  <a>TodoList</a>
	</RouterLink>
      </div>
    );
  }
})

클래스와 스타일의 귀속

https://jp.vuejs.org/v2/guide/class-and-style.html
특정 조건에서 특정 종류를 활성화하려고 할 때만 사용하지만, 이것은 세 가지 연산자를 사용해서 피하는 것이다.

v-model

다시 능동적으로 재현하고 싶을 때는 어떻게든 필요하기 때문에 jsx-next 편입babel을 그대로 사용했다v-model.
https://github.com/vuejs/jsx-next

해결되지 않은 물건

style scoped

작은 프로젝트라면 여긴 별로 신경 안 쓰지만 선택이 없으면 고통스럽겠죠.
스타일 대상의 범위를 어떻게 한정할 방법을 찾지 못해 포기했다.
CSS in JS를 사용하면 어느 정도 방지할 수 있습니다.
https://github.com/shippokun/toast-vue3/blob/main/src/components/vscode/vscode.component.tsx
그다음에는 아무 문제 없이 썼다.

총결산

최대한 받아들이는 스타일의 은혜가 큰 장점이라고 할 수 있다.
또 template 중 사용할 수 없는[1]optional chaining과nullish coalescing 등도 이용할 수 있다.
Vue2에서 사용Composition-API하는@vue/composition-api에서는 지원되지 않음setup[2],상기 render function도nextvue-router에서 지원하기 때문에 Vue2에서 가져오기가 어렵다고 할 수 밖에 없다.
'뷰를 도입했다고 해도 모델은 좀...'[3] 라고 말하기 쉬운데, 일정한 디자인을 바탕으로 도입한다면 뷰3로 억지로 타입 스크립트로 쓰지 않아도 될 것 같다.
앞으로 Vue3를 논의할 분들께 참고가 됐으면 좋겠습니다.
스타일이 좋아요.

잡담

Vue3로 바뀐 이후 테스트의 작법이 크게 달라져 인상적이었기 때문이다.v4 어디 갔었어?
store 괜찮아요. 그런데 러터는 어떡해요.
테스트로 읽기createLocalVue한 자신createRouter을 읽어보았는데, 새로 추가된 router에 깊이 들어가는 일로 스냅샷을 지워버렸어요. 그런데 이렇게 하면 돼요?
자세한 사람이 알려주면 큰 도움이 될 거예요.
https://github.com/shippokun/todo-vue3/blob/main/src/pages/todo/todo-list/components/todo-list/todo-list.component.spec.tsx
그리고 LINE[4]
Vue test utils.tsx를 읽을 때 형식을 수정하지 않습니다
이런 말이 있긴 하지만 특별히 보완할 만한 문제가 없기 때문에 원래 쓰는 방법이 다른 건가.이번에 쓴 코드에 테스트를 제대로 쓰지 못했으니 고려가 부족할 수도 있다.
각주
제가 모르고 쓰는 방법이 있을지도 몰라요↩︎
https://github.com/vuejs/composition-api ↩︎
내 관측 범위라면↩︎
이 보도에서 발췌↩︎