React - Snippets

✨ 스니펫(Snippet)이란?

프로그래밍을 하다 보면 항상 반복해서 치는 코드가 있다. 예를 들어 console.log()처럼 매번 입력하는 코드, 혹은 자주 쓰는 useEffect, function, interface 선언 등은 개발자의 손가락을 지치게 만든다. 이럴 때 유용한 도구가 바로 스니펫(Snippet)이다.

스니펫이란, 개발자가 자주 사용하는 코드 조각을 저장해두고, 짧은 키워드로 빠르게 입력할 수 있게 도와주는 기능이다.

React Snippets란?
React Snippet는 VSCode의 공식 확장 기능 중 하나로, React개발에 필요한 코드조각(Snippet)을 단축키 형태로 등록해 두고 Tab 키 한번으로 빠르게 완성시킬 수 있도록 도와준다.

 

💡 왜 스니펫을 써야 할까?

• 생산성 향상: 반복 입력 없이 단축키로 코드 작성
• 실수 방지: 오타, 누락 등을 줄여줌
• 일관성 유지: 팀 프로젝트에서도 동일한 코드 스타일 유지 가능
• 속도 향상: 코드 템플릿 자동 완성으로 시간 절약

 

⚙️ 설치 방법

1. VS Code 열기
2. Extensions (확장) 탭 열기 → "React Snippets" 검색
3. 아래 확장을 설치
4. 👉 ES7+ React/Redux/React-Native snippets (by dsznajder)

설치 후, .js, .jsx, .ts, .tsx 파일 내에서 바로 사용 가능!

---

✨ 자주 쓰는 Snippet 모음

단축어	결과 코드	설명
rafce	React Arrow Function Component + export default	기본 컴포넌트 빠르게 생성
rsc	React Standard Component	function 기반 컴포넌트
usf	useState import 포함 + 선언	상태 변수 선언 쉽게
useEffect	uef	useEffect 기본 구조 자동 완성
clg	console.log()	콘솔 로그
imr	import React from 'react'	기본 import
impt	import PropTypes from 'prop-types'	PropTypes 쓰는 경우

 

🧪 실전 예시

1. rafce 입력 후 Tab

import React from 'react'

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

export default MyComponent

2. usf 입력

const [state, setState] = useState(initialState);

3. uef 입력

useEffect(() => {
  // effect
  return () => {
    // cleanup
  };
}, []);

🔥 커스텀 스니펫 만들기

혹시 내가 자주 쓰는 커스텀 훅이나 반복되는 함수가 있다면?

• Command + Shift + P (Ctrl + Shift + P)
• Preferences: Configure User Snippets → typescriptreact.json 선택
• 아래처럼 직접 등록 가능:

"myCustomHook": {
  "prefix": "mch",
  "body": [
    "import useMyHook from '@/hooks/useMyHook';",
    "",
    "const { $1 } = useMyHook();"
  ],
  "description": "Custom Hook Import"
}