✨ React 스니펫 기능 사용하기

React 프로젝트를 하다 보면 반복적으로 작성해야 하는 코드들이 많다.
예를 들어 useState, useEffect, 컴포넌트 생성 등은 거의 매번 작성하게 된다.
이럴 때 코드 스니펫(snippet) 기능을 활용하면 생산성을 확실히 높일 수 있다.

오늘은 VS Code에서 사용할 수 있는 React 스니펫 기능을 소개하고, 실제 사용하는 방법을 정리한다.

💡 스니펫(Snippet)이란?

스니펫은 자주 사용하는 코드 조각을 미리 등록해두고,
짧은 키워드로 빠르게 입력할 수 있도록 도와주는 기능이다.

VS Code 같은 코드 에디터에서는
스니펫을 자동 완성처럼 사용할 수 있어 개발 속도를 높일 수 있다.

📦 추천 확장 프로그램 - ES7+ React/Redux/React-Native snippets

가장 많이 사용되는 React 스니펫 확장 프로그램은 다음과 같다.

• ES7+ React/Redux/React-Native snippets
  • by dsznajder

설치 방법

1. VS Code 왼쪽 사이드바에서 Extensions(확장 프로그램) 클릭한다.
2. 'ES7+ React/Redux/React-Native snippets'를 검색 후 설치한다.

🧩 자주 쓰는 React 스니펫 예시

입력	자동 완성되는 코드
rafce	화살표 함수형 컴포넌트
rfc	기본 함수형 컴포넌트
usf	useState import 포함한 기본 useState 코드
usee	useEffect 기본 코드
imr	React import (import React from 'react')
imp	ES6 import 문법
nfn	기본 named function

예시: rafce 입력 시 생성되는 코드

import React from 'react';

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

export default MyComponent;

이처럼 기본 컴포넌트 구조가 자동 완성되어 반복적인 작업 시간을 줄일 수 있다.

🛠 커스텀 스니펫 만들기

VS Code에서는 나만의 스니펫을 직접 정의할 수도 있다.

설정 방법

1. Command + Shift + P (Windows는 Ctrl + Shift + P)를 누른다.
2. 'Preferences: Configure User Snippets'를 검색한다.
3. javascriptreact.json 또는 typescriptreact.json 파일을 선택한다.
4. 아래와 같은 형식으로 추가한다.

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

🚀 스니펫을 적극 활용하면

• 매번 import 문, 기본 컴포넌트를 작성하지 않아도 된다.
• 빠르게 useState, useEffect 코드를 삽입할 수 있다.
• 코드 일관성을 유지할 수 있다.
• 오타 가능성을 줄일 수 있다.

🔨 TIL

• React 개발 시 반복 코드를 빠르게 작성할 수 있는 스니펫 기능을 배웠다.

• VS Code 확장 프로그램인 'ES7+ React/Redux/React-Native snippets'를 설치하면 다양한 자동 완성 키워드를 사용할 수 있다.

• 자주 쓰는 코드는 직접 커스텀 스니펫으로 등록할 수도 있다.

• 앞으로 React 프로젝트에서 스니펫을 적극 활용해 개발 속도를 높여야겠다.