[VSCode] Code Snippets 기능 사용해보기(+ Reacjs code snippets 사용법)
Code Snippet
snippet은 `개발자의 반복 타이핑을 회피할 수 있도록 재사용 가능한 소스 코드 단편`을 의미합니다.
워드나 한글에서 사용하던 상용구.. 라고 생각하면 좀더 쉬울까요?
snippet을 사용하면 반복되는 작업, 이를테면 HTML의 경우
<!DOCTYPE html>
<html lang="ko">
<head>
<meda charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>이렇게 매번 작성해주어야 하는 번거로운 작업을 간단한 명령어로 대신할 수 있다는 것입니다.
한번 snippet을 사용해 볼까요?
코드 에디터인 VSCode, Brackets 등등... 에서는 개발자들이 만든 플러그인을 설치하여 다양한 기능을 사용해 볼 수 있습니다. VSCode에서
플러그인 검색창에서 snippet을 검색해 봅시다. 캡처상 짤린 부분이 많지만
자바스크립트, HTML, Reactjs, Eno 등등... 다양한 snippet이 준비되어 있습니다.
저는 마침 리액트를 공부하고 있으니 Reactjs code snippets을 사용해 보겠습니다.
이 친구를 설치해줍시다.
플러그인 세부 정보에 사용법과, 상용어구 목록이 나열되어 있습니다.
| rcc→ | class component skeleton |
| rrc→ | class component skeleton with react-redux connect |
| rrdc→ | class component skeleton with react-redux connect and dispatch |
| rccp→ | class component skeleton with prop types after the class |
| rcjc→ | class component skeleton without import and default export lines |
| rcfc→ | class component skeleton that contains all the lifecycle methods |
| rwwd→ | class component without import statements |
| rpc→ | class pure component skeleton with prop types after the class |
| rsc→ | stateless component skeleton |
| rscp→ | stateless component with prop types skeleton |
| rscm→ | memoize stateless component skeleton |
| rscpm→ | memoize stateless component with prop types skeleton |
| rsf→ | stateless named function skeleton |
| rsfp→ | stateless named function with prop types skeleton |
| rsi→ | stateless component with prop types and implicit return |
| fcc→ | class component with flow types skeleton |
| fsf→ | stateless named function skeleton with flow types skeleton |
| fsc→ | stateless component with flow types skeleton |
| rpt→ | empty propTypes declaration |
| rdp→ | empty defaultProps declaration |
| con→ | class default constructor with props |
| conc→ | class default constructor with props and context |
| est→ | empty state object |
| cwm→ | componentWillMount method |
| cdm→ | componentDidMount method |
| cwr→ | componentWillReceiveProps method |
| scu→ | shouldComponentUpdate method |
| cwup→ | componentWillUpdate method |
| cdup→ | componentDidUpdate method |
| cwun→ | componentWillUnmount method |
| gsbu→ | getSnapshotBeforeUpdate method |
| gdsfp→ | static getDerivedStateFromProps method |
| cdc→ | componentDidCatch method |
| ren→ | render method |
| sst→ | this.setState with object as parameter |
| ssf→ | this.setState with function as parameter |
| props→ | this.props |
| state→ | this.state |
| bnd→ | binds the this of method inside the constructor |
| disp→ | MapDispatchToProps redux function |
설명이 좀 어렵죠?
그중 간단한 클래스형 컴포넌트를 만들어주는 rcc를 사용해 봅시다.
빈 js코드에 rcc를 입력해 주면,
요로코롬 Creates a React component class ... 라는 자동완성이 생깁니다.
이를 선택해 주면
이렇게 자동으로 빈 클래스형 컴포넌트가 생성되게 됩니다.
이 코드를 일일이 쳐 주는것도 리액트 이해에 도움이 되긴 하겠지만,
이미 숙달이 되어있다면 굳이 일일이 쳐주는 건 귀찮은 작업이겠죠?
이럴 때에 Snippet을 사용하면 아주 편하게 소스 코드를 작성할 수 있습니다!