[ReactJS] snippet을 사용한 템플릿 자동 완성 기능 사용하기

ReactJS 코드 템플릿을 자동 완성하는 방법에 대해 알아보자.

---

1. 우선 당연히 확장 프로그램부터 설치를 진행해야 한다.

Reactjs code snippets

Reactjs code snippets - Visual Studio Marketplace

 

Reactjs code snippets라는 확장 프로그램을 설치해주자. (vscode에서 설치해주면 된다.)

 

2. 설치가 완료되었다면 파일에서 특정 코드를 입력해주면 된다.

지원하는 파일 확장자는 .js / .ts / .jsx / .tsx 이다.

아래와 같이 사용하면 쉽게 템플릿 구문을 생성할 수 있다.

스니펫 목록을 살펴보려면 1번의 링크로 들어가면 목록이 나와있으며 주로 자주 사용하는 스니펫은 다음과 같다.

스니펫	설명
rcc	클래스 컴포넌트 생성
rsc	화살표함수 컴포넌트 생성
rsi	prop 유형 및 암시적 반환이 있는 화살표함수 컴포넌트 생성

---

추가적으로 ES7 + React/Redux/React-Native snippets 라는 확장 프로그램 역시 많이 사용되는 듯한데, 위에서 사용한 스니펫과는 좀 다르며, 골라서 사용하면 될 것 같다.

ES7+ React/Redux/React-Native snippets - Visual Studio Marketplace