[React snippets] 컴포넌트 종류별 단축키(숏컷)

컴포넌트 종류

1. 클래스형 컴포넌트

import React, { Component } from 'react'

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

2. 함수형 컴포넌트

2-1. 일반 함수형

import React from 'react'

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

2-2. 화살표 함수형

import React from 'react'

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

export default List

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

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

📌 컴포넌트 단축키

1. 클래스 컴포넌트

rcc

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

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

2. 함수형 컴포넌트

2-2. 일반 함수형

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-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