VSCode Extension 추천 - React Snippet

Code Snippet(코드 스니펫)

Snippet은 작은 조각이라는 뜻이다.

Code Snippet은 "코드 조각", 즉 재사용 가능한 소스 코드, 기계어, 텍스트의 작은 부분을 의미한다. 코드를 재사용할 수 있게 해줌으로써 반복 타이핑을 회피할 수 있게 도와준다.

 

Code Snippet을 사용하지 않았을 때

나는 기존에 React 컴포넌트로 페이지를 한 개 생성할 때 마다 이렇게 일일이 작성을 했다. 하나의 프로젝트를 수행한다고 했을 때 생성해야할 페이지 수를 생각해보면 정말 비효율적인 방법이다.

Code Snippet을 활용하면 이런 간단한 템플릿 코드들을 좀 더 효율적으로 작성할 수 있다.

 

VSCode Extension 탭에서 react snippets으로 검색한다.

나는 @popular 필터를 걸어서 가장 상위에 있는 것으로 골랐다.

 

[Install] 버튼을 누르면 설치가 끝난다.

해당 Extension의 DETAILS 탭을 보면 맨 하단에 Snippets 문서의 링크가 연결되어있는데 여기서 어떤 Snippet이 있는지 확인 가능하다. 자주 사용하는 Snippet은 외워두면 편리하다.

🔗 공식 GitHub를 참고하는 것도 추천한다.

 

아무래도 이 두가지가 가장 많이 쓰일 것 같다.

 

 

Code Snippet을 사용했을 때

따란~ rafce 다섯글자로 파일명에 해당하는 함수형 컴포넌트를 export를 포함해서 생성됐다. 👏

이제 효율적이고 생산적으로 개발을 하면 된다.