[code snippet] 단축키로 자주 쓰는 리액트 코드 만들기

code snippet 직접 제작

• 리액트의 컴포넌트 그리고 리덕스에서 반복되는 소스 매번 작성하기 손 아프다.
• Extenstions에서 snippet 다운받아 써봤는데 단축키 다 외우기 힘들뿐더러 내가 원하는 스타일이 조금씩 다르거나 존재하지 않는다.
• 고로 만들어서 쓰자!!

컴포넌트 단축키 만들기

• 컴포넌트 생성하고 컴포넌트 이름을 ${TM_FILENAME_BASE}로 변경

import React from 'react';

const ${TM_FILENAME_BASE} = () => {
  return (
    <>

    </>
  );
};

export default ${TM_FILENAME_BASE};

• https://snippet-generator.app/ 로 접속해서 컴포넌트 소스 복붙후 설명과 단축키 부분 작성하고 Copy snippet 클릭

• VSCODE의 언어설정을 react javascript로 변경

IDE 하단 javascript라고 써있는 곳 클릭하면 위에 언어 설정하는 input이 생성됨

javascript React 검색

모든 js파일을 javascript React로 바꾸고 싶으면 setting.json에 아래 내용 추가

    "files.associations": {
        "*.js": "javascriptreact"
    }

• 설정 가서 스니펫 등록 : Preference -> user snipets
  • javascriptreact.json 선택후 아래 내용 복붙
  • ${1:} 은 코드 생성시 처음으로 포커스가 가는 부분
  • ${2:} 는 탭 누르면 그다음으로 포커스가 가는 부분

{
  "Creat React Functional Component": {
    "prefix": "rfc",
    "body": [
      "import React from 'react';",
      "",
      "const ${1:${TM_FILENAME_BASE}} = () => {",
      "  return (",
      "    <>",
      "      ${2:}",
      "    </>",
      "  );",
      "};",
      "",
      "export default ${1:${TM_FILENAME_BASE}};"
    ],
    "description": "Creat React Functional Component"
  }
}

만들/만든 스니펫

리액트 전용

• rfc : 리액트 펑션 컴포넌트[완성]
• rcc : 리액트 클래스 컴포넌트[완성]

리덕스 전용

• fnrdc : reducer 함수[완성]
• rdm : 리덕스 모듈
• rdp : 리덕스 프로바이더

리듀스 생성

• rdth : thunk용 reduce
• rdsg : saga용 reduce

스타일드 컴포넌트

• srfc: 스타일 컴포넌트 훅[완성]

스토리북

• strb : 스토리북 파일 기본내용[완성]

// javascript용
{
  "Creat React Functional Component": {
    "prefix": "rfc",
    "body": [
      "import React from 'react';",
      "",
      "const ${1:${TM_FILENAME_BASE}} = () => {",
      "  return (",
      "    <>",
      "      ${2:}",
      "    </>",
      "  );",
      "};",
      "",
      "export default ${1:${TM_FILENAME_BASE}};"
    ],
    "description": "Creat React Functional Component"
  },
  "Creat React Class Component": {
    "prefix": "rcc",
    "body": [
      "import React, { Component } from 'react';",
      "",
      "class ${1:${TM_FILENAME_BASE}} extends Component {",
      "  render() {",
      "    return (",
      "      <>",
      "        ${2:}",
      "      </>",
      "    );",
      "  }",
      "}",
      "",
      "export default ${1:${TM_FILENAME_BASE}};"
    ],
    "description": "Creat React Class Component"
  },
  "Creat React Native Class Component": {
        "prefix": "rncc",
        "body": [
        "import React, { Component } from 'react';",
        "import { StyleSheet, Text, View, } from 'react-native';",
        "",
        "class ${1:${TM_FILENAME_BASE}} extends Component {",
        "  render() {",
        "    return (",
        "      <View>",
        "        ${2:}",
        "      </View>",
        "    );",
        "  }",
        "}",
        "",
        "const styles = StyleSheet.create({",
        "",
        "});",
        "",
        "export default ${1:${TM_FILENAME_BASE}};"
        ],
        "description": "Creat React Class Component"
    },
  "Styled React Functional Component": {
    "prefix": "srfc",
    "body": [
      "import React from 'react';",
      "import styled from 'styled-components';",
      "",
      "const Styled${1:${TM_FILENAME_BASE}} = styled.div``;",
      "",
      "const  ${1:${TM_FILENAME_BASE}} = function() {",
      "  return (",
      "    <Styled${1:${TM_FILENAME_BASE}}>",
      "",
      "    </Styled${1:${TM_FILENAME_BASE}}>",
      "  );",
      "};",
      "",
      "export default  ${1:${TM_FILENAME_BASE}};"
    ],
    "description": "Styled React Functional Component"
  },
  "create fuction called reducer": {
    "prefix": "fnrdc",
    "body": [
        "",
        "export default function ${TM_FILENAME_BASE}(state=initialState, action) {",
        "  switch (action.type) {",
        "    case ${1:}:",
        "      return {",
        "        ...state,",
        "      }",
        "  ",
        "    default:",
        "      return state",
        "  }",
        "}"
    ],
    "description": "create fuction called reducer"
  },
  "StoryBook": {
    "prefix": "strb",
    "body": [
      "import React from 'react';",
      "import { storiesOf } from '@storybook/react';",
      "",
      "import ${1:} from '../components/${1:}';",
      "",
      "storiesOf('${1:}', module)",
      "  .addWithJSX('기본 설정', () => <${1:}>안녕하세요</${1:}>)"
    ],
    "description": "StoryBook"
  }
}

• tsx

{
    "Creat React Functional Component": {
      "prefix": "rfc",
      "body": [
        "import React from 'react';",
        "",
        "type ${1:${TM_FILENAME_BASE}}Props = {",
        "",
        "}",
        "",
        "function ${1:${TM_FILENAME_BASE}}({}: ${1:${TM_FILENAME_BASE}}Props) {",
        "  return (",
        "    <>",
        "      ${2:}",
        "    </>",
        "  );",
        "};",
        "",
        "export default ${1:${TM_FILENAME_BASE}};"
      ],
      "description": "Creat React Functional Component"
    },
    "Creat React Class Component": {
      "prefix": "rcc",
      "body": [
        "import React, { Component } from 'react';",
        "",
        "type ${1:${TM_FILENAME_BASE}}Props = {}",
        "type ${1:${TM_FILENAME_BASE}}State = {}",
        "",
        "class ${1:${TM_FILENAME_BASE}} extends Component<${1:${TM_FILENAME_BASE}}Props, ${1:${TM_FILENAME_BASE}}State> {",
        "  render() {",
        "    return (",
        "      <>",
        "        ${2:}",
        "      </>",
        "    );",
        "  }",
        "}",
        "",
        "export default ${1:${TM_FILENAME_BASE}};"
      ],
      "description": "Creat React Class Component"
    }
  }