[React] React 유용한 스니펫들 정리

import구문, export default, Function 구조 등 관리하기 귀찮은 경우가 많은데, 스니펫을 이용하면 간단하고 빠르게 작성할 수 있다.

 

일단 VSCode에서 ES7+ React/Redux/React-Native snippets을 설치해야 한다.

ES7+ React/Redux/React-Native snippets - Visual Studio Marketplace

 

가장 핵심인 React 컴포넌트 생성 관련 스니펫들

rfce

import React from 'react';

function MyComponent() {
  return <div></div>;
}

export default MyComponent;

함수형 컴포넌트 구조를 자동으로 생성하고 함수명을 파일명과 똑같이 맞춰준다. 가장 많이 쓰고 편리한 스니펫.

 

rfc

import React from 'react';

export default function MyComponent() {
  return <div></div>;
}

export 위치만 다른 상태로 함수형 컴포넌트를 생성한다.

 

rafc / rafce

// rafc
import React from 'react';

export const MyComponent = () => {
  return <div></div>;
};

// rafce
import React from 'react';

const MyComponent = () => {
  return <div></div>;
};

export default MyComponent;

e를 붙이냐 안 붙이냐로 export 위치가 다른 것을 확인할 수 있다. 화살표 함수로 컴포넌트를 생성한다.

 

자주 쓰는 import 관련 스니펫

• imr : import React from 'react' - 리액트 import를 자동으로 생성함.
• imrse : import React, { useState, useEffect } from 'react' - 리액트 import와 자주 사용하는 hook인 useState와 useEffect imort를 자동으로 생성함.
• imp : import ModuleName from 'module' - module import 구조를 자동으로 생성함. src부터 작성하도록 유도되는데, tab을 눌러 작성 위치를 전환할 수 있음.
• imd : import { someting } from 'module' - named export(default 모듈이 아닌 모듈) 모듈을 불러올 때 사용

 

함수 생성 관련 스니펫

• nfn: const functionName = (params) => {} - 화살표 함수 생성
• anfn: (first) => { second } - 화살표 함수의 인라인 형태, 콜백 만들기 좋다
• enf: export const first = (second) => {third} - export 화살표 함수 만들기 

 

쓰면 편리할 만한 유틸 스니펫

• clg: console.log(object) - log로도 작성 가능하지만 손가락 움직임이 불편하고, 가끔 수학 log가 같이 나와서 짜증나는데 쓰기 좋다.
• clo: console.log('object :>> ', object); - 오브젝트 찍어주기
• dob, dar: 구조 분해 할당 단축키 (object/array) - React 사용하면서 구조분해할당은 자주 쓰게 될 건데 dob정도는 쓰기 좋을 것 같다.

 

클래스 컴포넌트 / Redux / 생명주기

• rcc / rce: 클래스형 컴포넌트를 쉽게 생성
• rconst: constructor + this.state = {} 한 번에 생성
• cdm, cdup, cwun 등 React 생명주기 메서드 자동 생성
• redux, rxaction, rxconst, rxreducer 등 Redux 구조 물 흐르듯 자동 생성

 

 

 

싹 처음부터 작성하는 게 여간 귀찮은 것이 아닌데, 스니펫을 쓰면 구조를 잡은 채로 작성할 수 있는 것이 장점인 것 같다. (멋쟁이 프로그래머처럼 작성하고 싶은 건 아니고) rfce는 정말 자주 쓰게 될 것 같다.