커스텀 스니펫을 사용하여 2 초 만에 전체 React 컴포넌트를 생성하는 방법

해결해야 할 문제
React 앱을 개발 중입니다. 그리고 동일한 보일러플레이트 코드를 계속 타이핑하고 있습니다:
import React from 'react';
const ComponentName = () => {
return (
<div>
</div>
);
};
export default ComponentName;

이것은 작아 보이지만, 빠르게 누적됩니다:

• 컴포넌트당 약 10 초
• 주당 수십 개의 컴포넌트
• 반복적인 타이핑으로 인한 시간 손실

해결책: 초속 내에 완전하며 프로덕션 준비가 된 컴포넌트를 생성하는 커스텀 VS Code 스니펫입니다.

단계 1: 스니펫 구성 열기
다음 키를 누르세요:
Ctrl + Shift + P
그런 다음 검색하세요:
Preferences: Configure User Snippets
선택하세요:

• javascriptreact.json → .jsx 타입을 위한 것
• typescriptreact.json → .tsx 타입을 위한 것

단계 2: 프로덕션 준비가 된 스니펫 팩 추가
스니펫 파일에 다음 내용을 붙여넣으세요:
{
"React Functional Component": {
"prefix": "rfc",
"body": [
"import React from 'react';",
"",
"const ${1:ComponentName} = () => {",
" return (",
" <div className= " ${2:container} ">",
" $3",
" </div>",
" );",
"};",
"",
"export default ${1:ComponentName};"
],
"description": "Generate a React functional component"
},
"React Component with Props": {
"prefix": "rcp",
"body": [
"import React from 'react';",
"import PropTypes from 'prop-types';",
"",
"const ${1:ComponentName} = ({ ${2:propName} }) => {",
" return (",
" <div>",
" $3",
" </div>",
" );",
"};",
"",
"${1:ComponentName}.propTypes = {",
" ${2:propName}: PropTypes.${4:string}.isRequired,",
";"
],
"description": "React component with PropTypes"
},
"React Component with useState": {
"prefix": "rcs",
"body": [
"import React, { useState } from 'react';",
"",
"const ${1:ComponentName} = () => {",
" const [${2:state}, set${2/(.*)/${1:/capitalize}/}] = useState(${3:initialValue});",
"",
" return (",
" <div>",
" $4",
" </div>",
" );",
"};",
"",
"export default ${1:ComponentName};"
],
"description": "React component with useState hook"
},
"React Component with useEffect": {
"prefix": "rce",
"body": [
"import React, { useState, useEffect } from 'react';",
"",
"const ${1:ComponentName} = () => {",
" useEffect(() => {",
" $2",
" }, []);",
"",
" return (",
" <div>",
" $3",
" </div>",
" );",
"};",
"",
"export default ${1:ComponentName};"
],
"description": "React component with useEffect hook"
},
"React Component with CSS Module": {
"prefix": "rccss",
"body": [
"import React from 'react';",
"import styles from './${1:ComponentName}.module.css';",
"",
"const ${1:ComponentName} = () => {",
" return (",
" <div className={styles.${2:container}}>",
" $3",
" </div>",
" );",
"};",
"",
"export default ${1:ComponentName};"
],
"description": "React component with CSS Module"
},
"React Arrow Function Export": {
"prefix": "rafc",
"body": [
"export const ${1:ComponentName} = () => {",
" return (",
" <div>",
" $2",
" </div>",
" );",
";"
],
"description": "Named export arrow function component"
}
}

단계 3: 사용 방법
어떤 .jsx 또는 .tsx 파일 내부에서:

• 접두사 (Prefix) | 결과 (Output)
• rfc | 기능형 컴포넌트 (Functional component)
• rcp | 속성 포함 컴포넌트 (Component with Props)
• rcs | useState 훅 포함 컴포넌트 (Component with useState)
• rce | useEffect 훅 포함 컴포넌트 (Component with useEffect)
• rccss | CSS Module 포함 컴포넌트 (Component with CSS Module)
• rafc | 네임드 익스포트 화살표 함수 컴포넌트 (Named export arrow function component)