React Tip. Visual Studio Code 리액트 문법 자동완성 플러그인 Reactjs code snippets

VS Code에는 신규로 컴포넌트를 정의할 때마다 일일이 코드를 작성해야 하는 번거로움을 줄여주는 고마운 플러그인이 있다.

 

좌측 추가 플러그인 설치탭을 클릭한 뒤 reactjs 라고 입력 후 검색하면 가장 먼저 뜨는 [ Rectjs code snippets ] 이다.

이미 설치한 상태이기 때문에 Unable 탭이 활성화 되어있지만, install 버튼을 클릭하여 플러그인을 설치하고 VS Code를 재시작하면 사용할 수 있다.

 

 

세부정보를 내려서 확인하면 아래와 같이 사용 가능한 단축 트리거들이 나열되어 있다.

Trigger	Content
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와 rsc에 대해 개별적으로 마킹처리를 하였는데, 이 2가지 단축 트리거에 대해 설명해보도록 한다.

 

rcc는 클래스형 컴포넌트를 생성할 때 사용하는 트리거다.

js파일을 생성한 후 rcc라고 작성하였을 때 사진과 같이 자동완성탭이 활성화된다. 해당 활성화 탭을 클릭해보자.

탭을 클릭하면, 위 사진처럼 자동으로 클래스형 컴포넌트 정의 구문이 작성된다.

 

 

그리고 rsc는 함수형 컴포넌트를 생성할 때 사용한다.

rs라고만 쳐도 위처럼 rsc를 클릭해달라고 탭이 활성화되며 재촉한다. 해당 탭을 선택해보자.

짜잔, 함수형 컴포넌트 정의 구문이 자동으로 완성되었다.

 

위 Trigger 표를 자세히 살펴보면 Redux나 Props를 사용하는 컴포넌트 자동완성 구문도 정의되어 있으니, 해당 트리거를 활용하면 코딩 시간을 줄일 때 요긴하게 사용할 수 있다.