Add react/function-component-definition (#42)

Author: doong-jo

web/.eslintrc.js

@@ -23,7 +23,7 @@ module.exports = {
     "plugin:@typescript-eslint/recommended",
     "plugin:import/typescript",
   ],
-  plugins: ["react", "jsx-a11y", "import", "prettier", "@typescript-eslint", "simple-import-sort",],
+  plugins: ["react", "jsx-a11y", "import", "prettier", "@typescript-eslint", "simple-import-sort"],
   ignorePatterns: [".eslintrc.js", "webpack.config.js"],
   globals: {},
   rules: {
@@ -73,6 +73,7 @@ module.exports = {
     "react/jsx-props-no-spreading": "off",
     "react/no-array-index-key": "warn",
     "react/button-has-type": "warn",
+    "react/function-component-definition": [2, { "namedComponents": "arrow-function" }],
     // reference: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#eslint
     // react 17이상 버전을 쓴다면 아래 주석을 해제하세요.
     // "react/jsx-uses-react": "off",

web/package.json

@@ -17,7 +17,7 @@
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-prettier": "3.3.1",
-    "eslint-plugin-react": "7.23.1",
+    "eslint-plugin-react": "7.29.4",
     "eslint-plugin-react-hooks": "4.2.0",
     "eslint-plugin-simple-import-sort": "7.0.0"
   },