React 개발을 빠르게 만들어 주는 VS Code 확장 3가지

이전 글에서 Vite 프로젝트에 ESLint, Prettier, Tailwind CSS까지 세팅했죠. 개발 환경은 갖춰졌으니, 이번에는 React 컴포넌트 작업을 빠르게 만들어 주는 VS Code 확장 세 가지를 설치하고 써 봅니다.

이 확장은 Next.js 프로젝트에서도 그대로 쓸 수 있어요. JSX/TSX를 다루는 도구라서 React 기반이기만 하면 됩니다.

시작하기 전에

• 이전 글에서 만든 Vite + React + TypeScript 프로젝트(my-app)가 있어야 합니다
• VS Code가 설치되어 있어야 합니다
• 예상 소요 시간: 약 10분

---

1. ES7+ React/Redux/React-Native snippets — 코드 스니펫

왜 필요한가요?

React 컴포넌트를 만들 때마다 import React from 'react'를 쓰고, export default function을 쓰고, return을 쓰고... 매번 같은 구조를 반복하게 됩니다. 이 확장은 약어 몇 글자만 치면 컴포넌트 전체 뼈대를 한 번에 만들어 줘요.

1-1. 설치

마켓플레이스에서 ES7+ React/Redux/React-Native snippets를 설치합니다.

설치만 하면 바로 쓸 수 있어요. 별도 설정은 없습니다.

1-2. 자주 쓰는 스니펫

새 .tsx 파일을 만들고, 아래 약어를 타이핑한 뒤 Tab 키를 누르면 코드가 펼쳐집니다.

rafce — 화살표 함수 컴포넌트 (가장 많이 씀)

rafce + Tab을 누르면 이렇게 됩니다.

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

export default MyComponent

스니펫에 따라 import React from 'react'가 첫 줄에 들어올 수 있는데, React 17부터는 이 줄이 필요 없습니다. Vite 프로젝트는 자동 JSX 변환을 쓰기 때문에 TypeScript가 "이 import는 안 쓰이는데?"라고 경고해요. 나오면 그냥 지우세요.

파일 이름을 기반으로 컴포넌트 이름이 자동으로 들어가요. Header.tsx 파일에서 rafce를 치면 Header가 컴포넌트 이름이 됩니다. 위의 이미지는 파일명이 test.tsx라 함수 이름이 test입니다.

rfce — 일반 함수 컴포넌트

복사
function MyComponent() {
  return (
    <div>MyComponent</div>
  )
}

export default MyComponent

화살표 함수 대신 일반 함수 선언을 선호하는 팀이라면 이걸 씁니다.

useState, useEffect 등 훅 스니펫은?

확장에 useState, useEffect 스니펫도 포함되어 있긴 한데, 실제로 써 보면 TypeScript 자동완성(함수 이름 추천)이 먼저 잡혀서 스니펫이 목록에 안 나오는 경우가 많아요. 이름이 같으니 충돌하는 거죠.

그래서 훅은 스니펫에 의존하기보다 직접 타이핑하는 게 현실적입니다.

복사
const [count, setCount] = useState(0)

useEffect(() => {
  // 실행할 코드
}, [])

rafce처럼 일반 코드와 겹칠 일이 없는 약어가 스니펫의 진짜 가치예요.

1-3. 주요 스니펫 정리표

전부 외울 필요는 없어요. rafce와 useState, useEffect 이 세 개만 알아도 일상적인 작업에서 충분합니다.

1-4. 동작 확인

src 폴더에 Test.tsx 파일을 새로 만들고, 빈 파일에서 rafce를 타이핑한 뒤 Tab을 눌러 보세요. 컴포넌트 뼈대가 자동으로 생성되고, 컴포넌트 이름이 Test로 들어가면 정상입니다.

---

2. Auto Rename Tag — 태그 이름 자동 동기화

왜 필요한가요?

JSX에서 <div>를 <section>으로 바꿀 때, 여는 태그만 고치고 닫는 태그를 깜빡하면 에러가 납니다. 특히 태그 사이에 코드가 많으면 닫는 태그를 찾아 스크롤하는 것 자체가 번거롭죠. 이 확장은 여는 태그를 고치면 닫는 태그가 자동으로 따라 바뀝니다.

3-1. 설치

마켓플레이스에서 Auto Rename Tag를 설치합니다.

설치 후 바로 동작해요.

3-2. 동작 확인

아무 .tsx 파일에서 <div> 태그를 <section>으로 바꿔 보세요. 커서가 여는 태그에 있을 때 이름을 수정하면 닫는 </div>가 자동으로 </section>으로 바뀌는 걸 볼 수 있습니다.

3-3. 참고

VS Code 1.44 이후 버전에는 HTML 파일에서 비슷한 기능이 내장되어 있어요. 하지만 JSX/TSX에서는 이 내장 기능이 동작하지 않는 경우가 있어서, React 프로젝트라면 이 확장을 따로 깔아 두는 게 안전합니다.

---

3. Highlight Matching Tag — 짝 태그 강조

왜 필요한가요?

JSX가 깊게 중첩되면 어떤 여는 태그가 어떤 닫는 태그와 짝인지 헷갈립니다. 들여쓰기로 어느 정도 파악할 수 있지만, 중첩이 3~4단계를 넘어가면 눈으로 따라가기가 쉽지 않아요. 이 확장은 커서가 위치한 태그의 짝을 색으로 강조해 줍니다.

3-1. 설치

마켓플레이스에서 Highlight Matching Tag를 설치합니다.

설치 후 바로 동작합니다.

3-2. 동작 확인

중첩된 JSX 코드에서 아무 태그 위에 커서를 놓아 보세요.

복사
<div className="container">
  <header>
    <nav>
      <ul>
        <li>항목 1</li>  {/* ← 여기에 커서를 놓으면 */}
        <li>항목 2</li>
      </ul>
    </nav>
  </header>
</div>

커서가 <li> 위에 있을 때 짝이 되는 </li>에 밑줄이나 배경색이 표시되면 정상적으로 동작하는 것입니다.

3-3. 스타일 커스터마이징

기본 강조 스타일이 마음에 안 들면 VS Code 설정에서 바꿀 수 있어요.

복사
{
  "highlight-matching-tag.styles": {
    "opening": {
      "left": {
        "custom": {
          "borderWidth": "0 0 0 2px",
          "borderStyle": "solid",
          "borderColor": "yellow"
        }
      }
    }
  }
}

이 설정은 개인 취향이라 .vscode/settings.json에 넣지 않아도 됩니다.

---

추천 확장 목록 업데이트

이 시리즈에서 다룬 확장을 전부 .vscode/extensions.json에 모아 두면 팀원 온보딩이 편해집니다.

복사
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "usernamehw.errorlens",
    "yoavbls.pretty-ts-errors",
    "bradlc.vscode-tailwindcss",
    "stivo.tailwind-fold",
    "dsznajder.es7-react-js-snippets",

    "formulahendry.auto-rename-tag",
    "vincaslt.highlight-matching-tag"
  ]
}

시리즈 세 편에 걸쳐 추천 확장이 9개가 됐어요. 이 정도면 React + TypeScript + Tailwind 프로젝트를 하기에 충분한 세트입니다.

---

마무리

이번 글에서 다룬 세 가지 확장은 모두 "설치만 하면 바로 동작"하는 것들이에요. 복잡한 설정이 필요 없어서 부담이 적습니다.

그중에서도 rafce 스니펫은 하루에도 여러 번 쓰게 돼요. 새 컴포넌트를 만들 때마다 import, function, return, export를 하나씩 타이핑하던 시간을 아낄 수 있습니다. Auto Rename Tag도 사소해 보이지만, 없으면 닫는 태그를 깜빡해서 빌드가 깨지는 일이 생각보다 자주 있거든요.

이 시리즈에서 세팅한 개발 환경을 정리하면 이렇습니다.

문제 해결

스니펫이 안 뜹니다

1. ES7+ React/Redux/React-Native snippets 확장이 설치되어 있는지 확인하세요
2. 파일 확장자가 .tsx 또는 .jsx인지 확인하세요. .ts 파일에서는 JSX 관련 스니펫이 동작하지 않아요
3. 다른 스니펫 확장과 약어가 겹칠 수 있습니다. 자동완성 목록에서 원하는 스니펫을 직접 선택해 보세요

Auto Rename Tag가 동작하지 않습니다

1. VS Code를 재시작해 보세요
2. 파일이 .tsx 또는 .jsx 형식인지 확인하세요
3. 여는 태그의 이름 부분에 커서가 정확히 있어야 합니다. 속성 부분에 커서가 있으면 동작하지 않아요