VSCODE 사용자코드

 {

    // Place your snippets for javascriptreact here. Each snippet is defined under a snippet name and has a prefix, body and

    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:

    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the

    // same ids are connected.

    // Example:

    // "Print to console": {

    //  "prefix": "log",

    //  "body": [

    //      "console.log('$1');",

    //      "$2"

    //  ],

    //  "description": "Log output to console"

    // }

    "Create Functional React Component": {

        "prefix": "cfrc",

        "body": [

          "import React from 'react';",

          "",

          "const ${TM_FILENAME_BASE} = () => {",

          "    return (",

          "        <>",

          "            ${TM_FILENAME_BASE}",

          "        </>",

          "    );",

          "}",

          "",

          "export default ${TM_FILENAME_BASE};"

        ],

        "description": "Create Functional React Component"

    },

    "Styled Functional React Component": {

        "prefix": "sfrc",

        "body": [

          "import React from 'react';",

          "import styled from 'styled-components';",

          "",

          "const ${TM_FILENAME_BASE}Block = styled.div``;",

          "",

          "const ${TM_FILENAME_BASE} = () => {",

          "    return (",

          "        <${TM_FILENAME_BASE}Block>",

          "            ${TM_FILENAME_BASE}",

          "        </${TM_FILENAME_BASE}Block>",

          "    );",

          "}",

          "",

          "export default ${TM_FILENAME_BASE};"

        ],

        "description": "Styled Functional React Component"

    },

    "Create Class React Component": {

        "prefix": "ccrc",

        "body": [

          "import React, { Component } from 'react';",

          "",

          "class ${TM_FILENAME_BASE} extends Component {",

          "    render() {",

          "        return (",

          "            ${TM_FILENAME_BASE}",

          "        )",

          "    }",

          "}",

          "",

          "export default ${TM_FILENAME_BASE};"

        ],

        "description": "Create Class React Component"

    },

    "Create Redux Module": {

        "prefix": "crdm",

        "body": [

          "import { createAction, handleActions } from 'redux-actions';",

          "// import { takeLatest, call } from 'redux-saga/effects';",

          "// import createRequestSaga, { createRequestActionTypes } from '../lib/createRequestSaga';",

          "",

          "const INITIALIZE = '${TM_FILENAME_BASE}/INITIALIZE';",

          "const CHANGE_VALUE = '${TM_FILENAME_BASE}/CHANGE_VALUE';",

          "// const [ACTION, ACTION_SUCCESS, ACTION_FAILURE] = createRequestActionTypes('${TM_FILENAME_BASE}/ACTION');",

          "// const [REACTION, REACTION_SUCCESS, REACTION_FAILURE] = createRequestActionTypes('${TM_FILENAME_BASE}/REACTION');",

          "",

          "export const ${TM_FILENAME_BASE}Initialize = createAction(INITIALIZE);",

          "export const ${TM_FILENAME_BASE}ChangeValue = createAction(CHANGE_VALUE, ({key, value}) => ({key, value}));",

          "// export const action = createAction(ACTION, data => data);",

          "",

          "// const actionSaga = createRequestSaga(ACTION, actionAPI.action);",

          "// function reactionSaga() {",

          "//     try {",

          "//         yield call(actionAPI.reaction);",

          "//     } catch (e) {",

          "//         console.error(e);",

          "//     }",

          "// }",

          "",

          "export function* ${TM_FILENAME_BASE}Saga() {",

          "    // yield takeLatest(ACTION, actionSaga);",

          "    // yield takeLatest(REACTION, reactionSaga);",

          "}",

          "",

          "const initialState = {",

          "    ${TM_FILENAME_BASE}: null,",

          "    error: null",

          "};",

          "",

          "const ${TM_FILENAME_BASE} = handleActions(",

          "    {",

          "        [INITIALIZE]: () => initialState,",

          "        [CHANGE_VALUE]: (state, { payload: {key, value}}) => ({",

          "            ...state,",

          "            [key]: value,",

          "        }),",

          "    },",

          "    initialState,",

          ");",

          "",

          "export default ${TM_FILENAME_BASE};"

        ],

        "description": "Create Redux Module"

      }

}