[React] React Snippet 컴포넌트 단축키 사용법

** VSCode 기준입니다

 

1. React Snippet 다운로드

• React Snippet을 검색하면 이렇게 나옵니다. 다운 받아주세요.

2. 단축키 정보들

1. rfc

• export default function 생성

import React from 'react'

export default function page() {
  return (
    <div>page</div>
  )
}

 

2. rfce 

• export default 를 외부에 쓸 때

import React from 'react'

function page() {
  return (
    <div>page</div>
  )
}

export default page

 

3. rfcp 

• props를 가진 function 생성시

import React from 'react'
import PropTypes from 'prop-types'

function page(props) {
  return (
    <div>page</div>
  )
}

page.propTypes = {} //타입스크립트를 사용할 경우 타입을 지정

export default page

 

4. rafc

• 화살표형 함수를 선언할 때

import React from 'react'

export const page = () => {
  return (
    <div>page</div>
  )
}

5. rafce

• 화살표형인데, export default를 외부에

import React from 'react'

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

export default page

 

6. rafcp

• props를 가지는 화살표형 함수 생성

import React from 'react'
import PropTypes from 'prop-types'

const page = props => {
  return (
    <div>page</div>
  )
}

page.propTypes = {} //타입 스크립트일 시 타입 지정

export default page

 

7. rfcredux

• React 컴포넌트를 Redux Store에 연결할 때 사용

import React from 'react'
import { connect } from 'react-redux'

export const page = (props) => {
  return (
    <div>page</div>
  )
}

const mapStateToProps = (state) => ({})

const mapDispatchToProps = {}

export default connect(mapStateToProps, mapDispatchToProps)(page)

 

8. rcc

• 클래스형 컴포넌트 생성시 사용

import React, { Component } from 'react'

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

 

컴포넌트 단축키는 유용하게 사용할 수 있으므로... Snippet을 사용한다면 외워두면 좋을 것 같다.

이름이 헷갈린다면 앞글자만 외워도 될 것 같다!!

• 화살표 함수는 arrow 이므로 rafc..
• 선언형 함수는 a없으니까 rfc.. 이런식으로!