React를 쓰다보면 당연하게도 계속해서 컴포넌트를 작성하게 된다.
그런데 하드코딩으로 계속 작성하기엔 불필요한 시간소비가 많기 때문에 VSC에서 편하게 작성할 수 있는 단축키를 알아두면 도움이 될 것이다.

이를 알아보자.

---

컴포넌트란?

React의 컴포넌트에 대한 간단한 설명은 이전 포스트에 정리를 하였으니,
이를 참조하도록 하자.

• React홈페이지를 참조해도 좋다.

📌 컴포넌트 종류 다시보기

1. 클래스형 컴포넌트

import React, { Component } from 'react'

export default class List extends Component {
  render() {
    return (
      <div>List</div>
    )
  }
}

2. 함수형 컴포넌트

1) 일반 함수형

import React from 'react'

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

2) 화살표 함수형

import React from 'react'

const List = () => {
  return (
    <div>List</div>
  )
}

export default List

📌 단축키를 쓰기 위한 방법은?

컴포넌트를 단축키를 이용해 쉽게 생성하기 위해서는 VSC기준 확장 프로그램을 설치해야 한다.

react snippet를 검색하면 여러가지 확장 프로그램이 나온다. 여기서 snippet은 '작은 부분'이란 뜻으로 코드의 일부분을 의미한다고 보면 될 것 같다.

그래서 우리는 이 일부만을 작성하는 것으로도 이와 관련된 코드들을 한번에 제공받을 수 있는 편의성을 얻을 수 있다.

여러 프레임워크나 라이브러리에 따라 다양한 종류가 있겠지만 내가 택한 것은 강의에서 추천한 위의 snippet이다.

설치를 마쳤다면 이를 통해 사용할 수 있는 단축키를 알아보자.

📌 컴포넌트 단축키

1. 클래스 컴포넌트

📢 입력키

• rcc

// rcc
import React, { Component } from 'react'

export default class List extends Component {
  render() {
    return (
      <div>List</div>
    )
  }
}

2. 함수형 컴포넌트

1) 일반 함수형

📢 입력키

• rfc : 컴포넌트 작성과 동시에 export

// rfc
import React from 'react'

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

---

• rfce : export 코드 분리

// rfce
import React from 'react'

function List() {
  return (
    <div>List</div>
  )
}

export default List

---

• rsf : props를 가진 컴포넌트 생성

// rsf
import React from 'react';

function List(props) {
  return (
    <div>
      
    </div>
  );
}

export default List;

2) 화살표 함수형

📢 입력키

• rsc : 빈 div를 가진 화살표 함수 컴포넌트 생성

// rsc
import React from 'react';

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

export default List;

---

• rafc : 화살표 함수 컴포넌트를 생성과 함께 export하고, 컴포넌트가 있는 js파일명이 div안에 작성됨

// rafc
import React from 'react'

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

---

• rafce : export코드가 분리된 화살표 함수 컴포넌트를 생성하고, 컴포넌트가 있는 js파일명이 div안에 작성됨

// rafce
import React from 'react'

const List = () => {
  return (
    <div>List</div>
  )
}

export default List

이외에도 분명 더 많은 단축키가 있지만~ 일단은 내가 최근 사용한, 그리고 사용할 코드들만 정리하고 나중에 필요한 snippet들을 추가하자 !

---

잘못된 부분에 대한 지적은 얼마든지 환영입니다.
감사합니다.