코드 스니펫 - 리액트 코드 자동 완성 익스텐션 추천 ( VS Code용 )

리액트 코드 스니펫 깃허브

단축어로 리액트 코드 작성하기

React 프로젝트를 진행하다 보면 반복적으로 작성해야 하는 코드가 많아져 번거로울 때가 있습니다. 특히, 컴포넌트를 생성하거나 useState, useEffect와 같은 훅을 사용할 때마다 동일한 반복해서 작성하는 시간이 지루하게도 느껴집니다. 이런 반복되는 코드 작업을 줄여주는 익스텐션이 ES7+ React/Redux/React-Native Snippets 입니다.

해당 익스텐션은 VS Code 코드에서 React, Redux, React-Native 관련 코드 스니펫을 제공하여 생산성을 크게 높여줍니다. 단축어 자동완성 기능을 통해 리액트 코드를 빠르게 작성할 수 있습니다.

---

ES7+ React/Redux/React-Native Snippets

rfce나 rafce와 같은 단축어로 빠르게 리액트 코드를 작성할 수 있는 익스텐션입니다.

세팅 방법

1. VS Code를 열고, 아래 버튼을 눌러 커맨드 팔래트 창을 실행합니다.

• Windows/Linux: Ctrl + Shift + P
• macOS: Cmd + Shift + P

2. 커맨드 팔레트에 아래 명령어를 입력하고 Enter 키를 누릅니다.

ext install dsznajder.es7-react-js-snippets

 

3. 설치가 완료되면 VS Code에 React/Redux/React-Native 스니펫이 추가됩니다.

4. 테스트를 해보면 잘 실행되는 것을 확인할 수 있습니다.

rafce 입력하고 enter하면 완성~

---

자주 사용하는 단축어 정리

1. React Functional Component 생성
   • rafce

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

2. useState 훅
   • us:

     const [state, setState] = useState(initialState);
     

3. useEffect 훅
   • ue
     

     useEffect(() => {
       // Effect logic
       return () => {
         // Cleanup
       };
     }, [dependencies]);
     

4. Redux 관련 스니펫
   • rcr: Redux 컨테이너 컴포넌트 생성
   • rcredux: Redux 연결된 컴포넌트 생성
5. PropTypes
   • pt
     

     ComponentName.propTypes = {};
     

이 외에도 더 많은 명령어를 확인하려면 공식 문서를 참고하세요.

marketplace.visualstudio 리액트 코드 스니펫 깃허브

---

코드 스니펫 익스텐션 장점

1. 생산성 향상
   반복적인 코드를 작성할 시간을 줄이고, 프로젝트의 복잡한 부분에 더 집중할 수 있습니다.
2. 일관성 유지
   팀 프로젝트에서 모든 구성원이 동일한 코딩 스타일과 구조를 유지할 수 있습니다.
3. 사용하기 쉬움
   간단한 키워드 입력만으로 자동완성 기능을 활용할 수 있어 누구나 빠르게 익힐 수 있습니다.

---

마무리

해당 익스텐션을 사용하면서 컴포넌트 생성이나 훅 사용 등 반복 작업을 줄일 수 있어 개발에 더 집중할 수 있었습니다~

반복되는 코드 작성이 지루해졌다면 코드스니펫 익스텐션 강력 추천합니당 ☺️