[react] 리액트 코드 템플릿 자동으로 완성하기

리액트로 개발을 하다보면 반복적으로 치는 코드가 있다.

 

import React from 'react';

...

export default Sample;

 

초반에는 익숙해질 겸 열심히 쳤는데 이제는 하나하나 만들때마다 치려니 슬슬 손가락에 무리가 간다.

 

그래서 편리하게 키 3개로 기본 템플릿을 불러오는 법을 소개하고자 한다.

 

일단 대부분 에디터에 존재하는 코드 조각 기능을 사용하려고 한다.

 

여기에서는 visual studio code로 진행한다.

 

1. 확장자 .js 파일 언어모드 리액트로 변경하기

리액트로 작업을 하다보면 수많은 .js 파일들이 나온다.

 

먼저 이 확장자를 가진 파일의 기본 언어모드를 javascript react 로 변경해준다.

 

먼저 Sample.js 라는 파일을 생성하고 오른쪽 아래 JavaScript라고 적혀있는 부분을 클릭해준다.

 

vs code 설정 변경

 

 

Configure File Association for '.js'... 를 선택해준다. 한글을 사용하는 사람은 '.js'에 대한 파일 연결 구성... 이라고 적혀있을 것이다.

 

그것을 선택해준다.

 

vs code 설정 변경

 

 

 

검색창에 javascript 를 치면 (연관검색으로 자동완성됨) JavaScript React 가 있다. 그 것을 선택해주면 언어 모드가 바뀐다.

 

javascript 설정 변경

 

 

2. snippet 코드 템플릿 만들기

 

 

Sample.js 파일에 다음과 같이 작성한다.

 

요즘은 Functional Component 를 거의 사용하기때문에 함수형 컴포넌트를 예로 들겠다.

 

본인이 필요한 코드 템플릿이 있다면 그걸로 작성해도 좋다.

 

아래와 같이 작성한다.

 

import React from 'react';

function ${TM_FILENAME_BASE} () {
    return (
        <div>
            ${1}
        </div>
    );
}

export default ${TM_FILENAME_BASE};

 

코드 템플릿 만들기

 

 

그리고 위 코드를 복사해서 아래 주소로 이동한다.

 

스니펫 제너레이터

 

그럼 아래와 같은 사이트로 이동한다.

 

코드를 아래 붙여넣고 설명부분에 해당 템플릿 설명, 그리고 단축키를 입력한다.

 

스니펫 제너레이터

 

 

그런 다음 오른쪽 아래에 있는 Copy Snippet 버튼을 눌러서 완성된 코드를 복사해준다.

 

 

 

3. vs code 에서 템플릿 만들기

 

 

vs code 에서 커맨트 + 쉬프트 + P (맥) / 컨트롤 + 쉬프트 + P (윈도우) 를 누른 뒤 입력창에 Configure Snippet 을 입력한다.

 

나타나는 Preference 를 선택해준다.

 

vs code 코드 템플릿

 

 

javascript 를 입력하고 javaScriptreact.json 을 선택해준다.

 

vs code 설정 변경

 

 

그럼 아래와 같은 json 파일이 열리는데 아까 복사해 놓은 코드를 붙여넣고 저장해준다.

 

코드 등록

 

 

이제 원하는 파일명으로 파일을 생성한 뒤 fc 를 입력하면 바로 저장해 두었던 단축키가 나타나게 된다.

 

엔터를 치면 파일 이름으로 컴포넌트가 생성되는 것을 확인할 수 있다.

 

컴포넌트 불러오기