컴포넌트 생성하기 (ft.snippet 등록)

 

컴포넌트의 기본 구조는 아래와 같으며, vscode에서는 리액트 관련 extention을 설치하면 "rafce" 단축키를 통해 쉽게 기본 코드를 생성할 수 있다.

import React from "react";

const App = () => {
	return (
    	<p>이 위치에 HTML(jsx, tsx) 작성된다.</p>
    );
};

export default App;

 

snippet (단축키) 등록 방법

jsx 구조와 단축키, snippet 명칭만 넣으면 코드를 생성해 주는 사이트도 있어 extention 설치 대신 직접 등록도 가능하다.

https://snippet-generator.app/?description=&tabtrigger=&snippet=&mode=vscode

snippet generator

 

vscode 내 snippet 등록 방법

 

1. 아래 이미지의 User Snippets를 누르면 상단에 검색창에 focus가 가는데 거기서 등록하고자 하는 프레임워크를 입력한다. 그리고 오

 

2. 아래와 같이 사이트에서 나온 코드를 붙여넣으면 끝난다.