Front-end/React.js

35. Snippet 사용하기 - 리액트 입문 | 벨로퍼트

AGAL 2020. 7. 10. 21:05
반응형

 

Snippet 은 도구라기보단, 에디터마다 내장되어있는 기능입니다. 한국어로는 "코드 조각" 이라고도 부르는데요, Snippet 의 용도는 자주 사용되는 코드에 대하여 단축어를 만들어서 코드를 빠르게 생성해내는 것 입니다.

 

VS Code 의 확장 마켓플레이스에서 React Snippet 이라고 검색해봐도 다양한 확장 프로그램들이 나오는데요, 저는 그런 확장 프로그램을 쓰는 것 보다 직접 만들어서 사용하는 것을 선호합니다. 왜냐하면 확장 프로그램을 통해서 스니펫을 사용하게 되면 실제로 사용하지 않는 스니펫들도 있고 마음에 들지 않는 단축어일때도 있기 때문이죠.

이미지를 클릭하면 과정을 볼 수 있습니다.

우선, 여러분들이 우선적으로 해야 할 것은 VS Code 에서 .js 확장자에 대하여 언어 모드를 JavaScript React 로 설정하는 것 입니다. 기본 설정으로는 일반 JavaScript 로 되어있는데 이를 JavaScript React 로 바꿔주세요.

 

그 다음에는, 여러분이 만들고 싶은 스니펫을 위한 샘플 코드를 생성하세요. src 디렉터리에 Sample.js 파일을 만들어서 다음 코드를 작성해보세요.

/src/Sample.js :

import React from 'react';

function Sample() {
  return (
    <div>
      Hello React!
    </div>
  );
}

export default Sample;

정말 간단한 함수형 컴포넌트이죠? 이를 스니펫으로 만들어보겠습니다. 우선, Sample 이라는 키워드가 있는 곳에 파일 이름이 들어가게 하고 싶기 때문에 Sample 을 ${TM_FILENAME_BASE} 로 바꿔주세요. 이 값은 스니펫에서 사용 할 수 있는 변수인데 여기 에서 자세한 내용을 볼 수 있습니다.

import React from 'react';

function ${TM_FILENAME_BASE}() {
  return (
    <div>
      Hello React!
    </div>
  );
}

export default ${TM_FILENAME_BASE};

그 다음, Hello React 부분을 ${1} 이라고 작성해주세요. 이 부분이 나중에 스니펫을 통해 코드를 생성하게 됐을 때 텍스트 커서가 맨 처음 위치할 곳입니다.

* 기본값을 정하고 싶다면, ${1:기본값}

* ${n} 로 감싸면 tab 을 누를 때마다 n 순서대로 커서가 이동한다. 

import React from 'react';

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

export default ${TM_FILENAME_BASE};

그 다음에 이 코드를 복사해서 Snippet Generator 웹서비스를 열어서 좌측 코드 에디터에 붙여넣으세요.

상단에 Description 과 Tab Trigger 라는 입력창이 있는데, Description 에는 설명을, Tab Trigger 에는 단축어를 넣으시면 됩니다. 저는 functional component 라는 의미로, fc 라고 넣었습니다. 또는, react functional component 라는 의미로 rfc 라고 입력을 해도 됩니다. 여러분의 마음대로 설정하세요.

 

그럼 우측에 코드 스니펫 코드가 생성되는데, 이를 복사하세요.

 

그 다음에는 VS Code 에서 F1 키 또는 ⌘ + ⇧ + P (윈도우는 Ctrl + Shift + P) 를 누르고 Configure Snippet 을 검색하세요.

그리고 javascriptreact.json 을 선택하면 snippet 을 위한 json 파일이 열리는데 거기에 방금 복사한 내용을 붙여넣으면 됩니다.

{
  "Functional Component": {
    "prefix": "fc",
    "body": [
      "import React from 'react';",
      "",
      "function ${TM_FILENAME_BASE}() {",
      "  return (",
      "    <div>",
      "      ${1}",
      "    </div>",
      "  );",
      "}",
      "",
      "export default ${TM_FILENAME_BASE};"
    ],
    "description": "Functional Component"
  }
}

이제 다시 Sample.js 파일을 열어서 모든 코드를 지운 후 fc 라고 입력 후 엔터를 눌러보세요.

그러면 다음과 같이 자동으로 코드가 생성됩니다.

여러분이 앞으로 리액트 개발을 하면서 자주 사용되는 코드가 있다면 이렇게 스니펫을 만들어서 관리를 하게 된다면 개발 생산성을 높여줄 수 있을 것 입니다. 여러분의 마음대로 만들어서 사용할 수 있다는 점 때문에 직접 만들어서 사용 하는 것을 추천드리지만, 하나 하나 만들어서 사용하는게 귀찮다고 느껴지신다면 맘에드는 Snippet 확장 프로그램을 찾아서 사용해보는 것도 나쁘지는 않습니다.

반응형