generate snippets in VSCode

VS Code에서 Generate Snippet으로 React 스니펫 직접 만들기

React 개발을 하다 보면 함수형 컴포넌트, 커스텀 훅, 타입 선언 등 반복적으로 작성하는 코드 패턴이 많다.
이런 코드 템플릿을 **자동으로 생성해주는 도구가 스니펫(Snippet)**이며, VS Code는 이를 자유롭게 커스터마이징할 수 있다.

특히 Generate Snippet 확장 프로그램을 활용하면, 코드 블록을 드래그해서 바로 스니펫으로 변환할 수 있어 개발 효율이 크게 향상된다.

---

1. Generate Snippet 확장 프로그램 소개

Generate Snippet은 다음 기능을 제공하는 VS Code 확장 프로그램이다:

• 선택한 코드 블록을 기반으로 스니펫 자동 생성
• 스니펫 이름/trigger(prefix) 설정
• JS, TS, JSX, TSX 등 원하는 파일 타입에 적용 가능
• 기존 사용자 스니펫 파일에 자동 추가

복잡한 JSON 구조를 직접 작성할 필요 없이 “코드를 선택 → Snippet 생성”만 하면 된다.

---

2. 설치 방법

1. VS Code 실행
2. 왼쪽 Extensions(확장) 아이콘 클릭
3. 검색창에 Generate Snippet 입력
4. 설치 버튼 클릭(Install)

설치 후 바로 “우클릭 → Generate Snippet” 기능이 활성화된다.

---

3. 스니펫 생성 방법

3.1 코드 선택 → 우클릭 → Generate Snippet

1. 스니펫으로 만들고 싶은 React 코드를 드래그하여 선택
2. 선택 영역에서 우클릭
3. 메뉴에서 Generate Snippet 클릭

그러면 아래와 같은 설정 팝업이 나온다:

• Name: 스니펫 이름
• Prefix(Trigger): 입력할 키워드 (예: rafct → React Arrow Function Component with Type)
• Scope: 적용 언어 (javascriptreact, typescriptreact 등)
• Description: 스니펫 설명

---

4. React 컴포넌트 스니펫 직접 만들기 예시

예를 들어 아래와 같은 TSX 기반 React 컴포넌트가 있다고 하자:

 

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

export default ComponentName;

이 코드를 선택 후 Generate Snippet을 실행하고 아래처럼 설정할 수 있다:

• Name: react-functional-component
• Prefix: rfc
• Scope: typescriptreact
• Description: 기본 React 함수형 컴포넌트 템플릿

그러면 VS Code는 자동으로 사용자 스니펫 파일(typescriptreact.json)에 다음과 같은 JSON을 추가해준다:

"react-functional-component": {
  "prefix": "rfc",
  "body": [
    "const ${1:ComponentName} = () => {",
    "  return (",
    "    <div>${1:ComponentName}</div>",
    "  );",
    "};",
    "",
    "export default ${1:ComponentName};"
  ],
  "description": "기본 React 함수형 컴포넌트 템플릿"
}

이제 TSX 파일에서 rfc를 입력하면 위 템플릿이 자동 생성된다.

---

5. 추천 스니펫 예제

React 개발에 유용한 스니펫 아이디어:

5.1 useState 스니펫

const [${1:state}, set${2:State}] = useState(${3:null});

5.2 useEffect 기본 템플릿

useEffect(() => {
  ${1:// 실행할 코드}
}, [${2:deps}]);

5.3 커스텀 훅 템플릿

export const use${1:HookName} = () => {
  const [${2:state}, set${3:State}] = useState(${4:null});

  return {
    ${2:state},
    set${3:State}
  };
};

5.4 페이지 레이아웃 컴포넌트

 

const ${1:Page} = () => {
  return (
    <main className="container">
      ${2:/* 콘텐츠 */}
    </main>
  );
};

export default ${1:Page};

---

6. 장점 정리

기능설명

코드 선택 → 자동 생성	JSON 작성 없이 스니펫 생성
React 코드 재사용 증가	반복 작업 최소화
프로젝트 맞춤 템플릿 구성	코딩 스타일 통일
TS/JS/JSX/TSX 완전 지원	사용 언어에 맞는 스니펫 저장 가능

---

7. 마무리

VS Code의 Generate Snippet 확장 프로그램은 React 개발 생산성을 극대화하는 도구다.
자주 사용하는 패턴을 스니펫으로 등록하면 새로운 파일 생성 속도, 반복 코드 작성 속도 모두 크게 향상된다.

특히 팀 개발에서는 동일 스니펫을 공유해 코딩 스타일을 통일하는 데도 매우 유용하다.

필요한 스니펫이 생기면 코드를 선택해서 바로 생성해보자.
개발 속도가 진짜로 달라진다!