[React] Visual Studio Code로 리액트 개발 시 유용한 자동완성 단축키

React 개발시 유용한 자동완성 단축키 플러그인 reactjs code snippets

 

비주얼 스튜디오 코드 확장(Extensions) 아이콘을 클릭 후 reactjs code snippets 를 install 후 

비주얼 스튜디오 코드를 재실행 한다.

 

 

• rsf(React Stateless Function Component) : 함수형 컴포넌트를 생성

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      My Stateless Function Component
    </div>
  );
};

export default MyComponent;

 

• rcc(React Class Component) : 클래스형 React 컴포넌트 생성

import React, { Component } from 'react';

class YourComponentName extends Component {
  render() {
    return (
      <div>
        {/* 컴포넌트 내용 */}
      </div>
    );
  }
}

export default YourComponentName;

 

• rccp(React Class Component with Props) : props를 포함한 클래스형 React 컴포넌트 생성

import React, { Component } from 'react';

class YourComponentName extends Component {
  render() {
    const { prop1, prop2 } = this.props;
    return (
      <div>
        {/* 컴포넌트 내용 */}
        {prop1} {prop2}
      </div>
    );
  }
}

export default YourComponentName;

 

 

• rcfc(React Class Functional Component) : 함수형 React 컴포넌트를 생성하고 해당 컴포넌트에 props를 받는 구조를 자동생성

import React from 'react';

const YourComponentName = (props) => {
  return (
    <div>
      {/* 컴포넌트 내용 */}
      {props.prop1} {props.prop2}
    </div>
  );
};

export default YourComponentName;

 

• rcjc(React Class Component with Default Props and Constructor) : constructor와 defaultProps를 포함한 클래스형 React 컴포넌트 생성

import React, { Component } from 'react';

class YourComponentName extends Component {
  static defaultProps = {
    prop1: 'default value',
  };

  constructor(props) {
    super(props);
    this.state = {
      someState: '',
    };
  }

  render() {
    return (
      <div>
        {/* 컴포넌트 내용 */}
        {this.props.prop1}
      </div>
    );
  }
}

export default YourComponentName;