[VSCode] Snippet 사용하기

리액트 프로젝트를 진행하면서 같은 구조의 컴포넌트를 생성하는 일이 많았습니다.
오늘은 개발의 효율성을 높여주는 스니펫에 대해 알아보겠습니다.

---

스니펫의 개념

스니펫은 재사용 가능한 소스 코드, 기계어, 텍스트의 작은 부분을 의미합니다.
쉽게 말해 자주 사용하는 코드 조각을 저장해두고 필요할 때 빠르게 불러와 사용할 수 있는 기능입니다.

예를 들어, 제가 느꼈던 리액트 컴포넌트는 이런 기본 구조를 가지고 있습니다.

import React from 'react';

const Component = () => {
  return (
    <div>
      
    </div>
  );
};

export default Component;

스니펫을 활용하면 이런 반복적인 코드를 몇 번의 키스트로크로 생성할 수 있습니다.

 

VSCode 스니펫

제가 사용했던 스니펫은 ES7+ React/Redux/React-Native snippets입니다.
해당 스니펫은 다음과 같은 특징을 가지고 있습니다.

• React 개발에 필수적인 스니펫 모음
• rafce로 화살표 함수 컴포넌트 생성
• usf로 useState 훅 자동완성

// 'rafce' 입력 후 Tab
import React from 'react'

const MyComponent = () => {
  return (
    <div>MyComponent</div>
  )
}

export default MyComponent

 

---

스니펫을 적극적으로 활용하면 반복적인 코드 작성 시간을 크게 줄일 수 있습니다.
처음에는 스니펫 명령어를 외우는 것이 번거로울 수 있지만, 자주 사용하다 보면 자연스럽게 손에 익게 됩니다.

여러분만의 커스텀 스니펫을 만들어 사용하는 것도 추천드립니다.
VSCode의 설정에서 직접 스니펫을 정의할 수 있으니, 자주 사용하는 코드 패턴이 있다면 스니펫으로 만들어보세요!

글을 끝까지 봐주셔서 감사합니다.
틀린 내용이 있다면 댓글로 지적 부탁드립니다.