[React] React 개발 속도를 높이는 나만의 VS Code 스니펫 설정

리액트 컴포넌트를 작성하다 보면 반복되는 코드가 참 많습니다. 특히 className 처리, 인라인 스타일 작성, SCSS 모듈과 함께 컴포넌트를 구성하는 기본 템플릿까지~ 매번 복붙 하거나 타이핑하기엔 너무 번거롭죠. 저는 이런 반복 작업을 줄이기 위해 VS Code 사용자 스니펫(User Snippets)을 설정해서 사용하고 있는데요, 오늘은 제가 실무에서 자주 쓰는 스니펫 3가지를 소개해드리겠습니다.

 

 

 

설정 파일 위치

먼저 스니펫을 설정하려면 아래 경로의 파일을 열어야 해요.

Ctrl + Shift + P (맥은 Cmd + Shift + P) > Preferences: Configure User Snippets > typescriptreact 선택 후 JSON 파일에 코드를 추가하면 됩니다.

 

 

1. cx - classNames 헬퍼 단축키

prefix에 cx를 입력하면 자동 완성이 되고, styles.클래스명 부분에 커서가 위치해 원하는 클래스명을 바로 입력할 수 있습니다.

classnames/bind 방식으로 스타일을 바인딩할 때 유용하게 사용됩니다.

"Add className using cx": {
  "prefix": "cx",
  "body": [
    "className={cx(styles.$1)}$0"
  ],
  "description": "Add className using cx"
}

 

2. style - 인라인 스타일 단축키

style 입력 시 자동 생성됩니다.

property에는 color, fontSize 등 원하는 스타일 속성을 입력하고, 값은 자동으로 문자열 형태로 감싸져 작성됩니다.

간단한 스타일을 빠르게 테스트할 때 유용합니다.

"Add inline style object": {
  "prefix": "style",
  "body": [
    "style={{ ${1:property}: \"$2\" }}$0"
  ],
  "description": "Add inline style object"
}

 

3. rscss - SCSS 모듈 기반 리액트 컴포넌트 템플릿

rscss 입력 시 React 컴포넌트 템플릿이 자동 생성됩니다.

TM_FILENAME_BASE는 현재 파일명을 자동으로 가져오며, classnames/bind와 SCSS 모듈을 자동으로 import 해줍니다. 컴포넌트 이름도 파일명을 기준으로 자동 생성됩니다.

컴포넌트를 새로 만들 때 매번 같은 패턴을 타이핑하지 않아도 돼서 정말 편리합니다.

"React Component with SCSS": {
  "prefix": "rscss",
  "body": [
    "import React from \"react\";",
    "import classNames from \"classnames/bind\";",
    "",
    "import styles from \"./${TM_FILENAME_BASE}.module.scss\";",
    "const cx = classNames.bind(styles);",
    "",
    "const ${TM_FILENAME_BASE} = () => {",
    "  return <div></div>;",
    "};",
    "",
    "export default ${TM_FILENAME_BASE};"
  ],
  "description": "React Component with SCSS module and classNames"
}

 

 

스니펫을 잘 설정해두면 개발 속도가 눈에 띄게 빨라집니다. 반복되는 타이핑을 줄이고, 스타일 가이드를 더 일관성 있게 유지할 수 있어요.

이외에도 props 인터페이스까지 자동으로 만들어주거나, 테스트 파일도 함께 생성되게 할 수 있으니 필요에 따라 확장해서 사용해 보세요.

 

 

 

[Git] git rebase에서 충돌이 날 때 대처법 (feat. 커밋 메시지 수정)

 

[AI] 빙챗(Bing Chat)/코파일럿(Copilot) 설치 방법 및 간단 사용법

 

[Utility] Microsoft Designer로 쉽게 디자인하기

 

[SCSS] 자연스러운 전환을 위한 Overlay 팝업의 Dim 영역 처리

 

[HTML] video vs iframe, 어떤 것이 더 적합할까?