React 주요 단축키

이 단축키는 주로 VS Code 환경에서 확장 프로그램 ES7+ React/Redux/React-Native snippets을 설치한 경우 사용할 수 있다.

---

React 주요 단축키

단축키	생성 코드	설명
rafce	React Arrow Function Component with Export	화살표 함수형 컴포넌트 생성
rafc	React Arrow Function Component	화살표 함수형 컴포넌트 생성 (익스포트 X)
rcc	React Class Component	클래스형 컴포넌트 생성
rce	React Class Component with Export	클래스형 컴포넌트 + export
rfc	React Function Component	함수형 컴포넌트 생성
imr	import React from 'react';	React 임포트
impt	import PropTypes from 'prop-types';	PropTypes 임포트
usestate	const [state, setState] = useState(initialState);	useState 훅 생성
useeffect	useEffect(() => {}, []);	useEffect 훅 생성
reduxmap	const mapStateToProps = state => ({}); const mapDispatchToProps = {}; export default connect(mapStateToProps, mapDispatchToProps)(ComponentName);	리덕스 mapStateToProps, mapDispatchToProps 생성
hoc	Higher Order Component	고차 컴포넌트 생성

---

실제 코드 예시

1. 함수형 컴포넌트 생성 (rafce)

import React from 'react';

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

export default ComponentName;

---

2. 클래스형 컴포넌트 생성 (rce)

import React, { Component } from 'react';

export default class ComponentName extends Component {
  render() {
    return <div>ComponentName</div>;
  }
}

---

3. useState 생성 (usestate)

import React, { useState } from 'react';

const ComponentName = () => {
  const [state, setState] = useState('');

  return <div>ComponentName</div>;
};

export default ComponentName;

---

VS Code 단축키 팁

1. 파일 이름과 컴포넌트 이름 일치:

   컴포넌트 이름과 파일 이름을 일치시키면 관리가 쉬워집니다.

   예: Header.js 파일 안에는 Header 컴포넌트를 선언.

2. 컴포넌트 자동 임포트:

   컴포넌트 이름을 작성하고 Ctrl + Space를 누르면 자동으로 임포트 가능.

3. 파일 생성 단축키 (React 확장 프로그램 필요):

   폴더에서 Ctrl + Shift + P → React Component 입력 후 컴포넌트 이름 작성.

---

확장 프로그램 설치 방법

1. VS Code에서 Extensions (Ctrl + Shift + X)로 이동.
2. ES7+ React/Redux/React-Native snippets 검색 후 설치.
3. 설치 후 위 단축키 사용 가능!

---

추가 팁

• Prettier: 코드 정리 및 포맷 자동화
• Emmet: HTML/CSS 작성 속도 향상
• Live Server: 코드 저장 시 자동으로 브라우저 새로고침