[React.js] 리액트 스니펫(Snippet) 정리

리액트 스니펫(Snippet) 정리

들어가며

• 비주얼 스튜디오 코드(VS Code)의 리액트(React.js) 스니펫 확장(ES7+ React/Redux/React-Native snippets)을 설치한 후 사용할 수 있는 스니펫들을 정리해본다.

 

 

스니펫(Snippet)

• 프로그래밍에서 자주 사용되는 코드 조각이나 템플릿
• 일반적으로 반복적으로 작성해야 하는 코드를 빠르고 효율적으로 생성할 수 있도록 도와주는 기능

 

VS Code 확장 설치

• 리액트 스니펫을 VS Code에서 사용하려면, 아래의 확장 프로그램을 설치해줘야 한다.

			
			
			
		
ES7+ React/Redux/React-Native snippets

ES7+ React/Redux/React-Native snippets - Visual Studio Marketplace

 

리액트 스니펫의 종류

① rafc (React Arrow Function Component) / rafce (React Arrow Function Component with Export)

• 기본적인 화살표 함수형 컴포넌트를 생성한다.

			
			
			
		
import React from 'react';
 
const ComponentName = () => {
  return (
    <div>
      
    </div>
  );
};
 
export default ComponentName;

 

② rfc (React Functional Component) / rfce (React Functional Component with Export)

• 기본적인 함수형 컴포넌트를 생성한다.

			
			
			
		
import React from 'react';
 
function ComponentName() {
  return (
    <div>
      
    </div>
  );
}
 
export default ComponentName;

 

③ cc (Class Component)

• 기본적인 클래스형 컴포넌트를 생성한다.

			
			
			
		
import React, { Component } from 'react';
 
class ComponentName extends Component {
  render() {
    return (
      <div>
        
      </div>
    );
  }
}
 
export default ComponentName;

 

④ rcc (React Class Component with Constructor)

• 생성자(Constructor) 메서드를 포함한 클래스형 컴포넌트를 생성한다.

			
			
			
		
import React, { Component } from 'react';
 
class ComponentName extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
 
  render() {
    return (
      <div>
        
      </div>
    );
  }
}
 
export default ComponentName;

 

⑤ rpc (React Pure Component)

• 리액트의 PureComponent를 사용하는 클래스형 컴포넌트를 생성한다.

			
			
			
		
import React, { PureComponent } from 'react';
 
class ComponentName extends PureComponent {
  render() {
    return (
      <div>
        
      </div>
    );
  }
}
 
export default ComponentName;

 

기타

• 더 다양한 스니펫을 확인하려면, 아래의 링크를 참고한다.

vscode-react-javascript-snippets/docs/Snippets.md at 185bb91a0b692c54136663464e8225872c434637 · r5n-dev/vscode-react-javascript

 

참고 사이트

ES7+ React/Redux/React-Native snippets - Visual Studio Marketplace