React 개발 시 단축키로 구조를 만들어보자

이걸 쓰려면 React Snippet부터 Extension에서 깔자!

 

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

출처: https://velog.io/@rgfdds98/React-snippets-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%A2%85%EB%A5%98%EB%B3%84-%EB%8B%A8%EC%B6%95%ED%82%A4

[React snippets] 컴포넌트 종류별 단축키