[리뷰 요청] 2주차 1번 과제

.eslintrc.js

@@ -3,20 +3,15 @@ module.exports = {
     browser: true,
     es2021: true,
   },
-  extends: [
-    'plugin:react/recommended',
-    'airbnb',
-  ],
+  extends: ['plugin:react/recommended', 'airbnb'],
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
     },
     ecmaVersion: 12,
     sourceType: 'module',
   },
-  plugins: [
-    'react',
-  ],
+  plugins: ['react'],
   globals: {
     Atomics: 'readonly',
     SharedArrayBuffer: 'readonly',
@@ -45,8 +40,9 @@ module.exports = {
     'object-curly-spacing': ['error', 'always'],
     'key-spacing': ['error', { mode: 'strict' }],
     'arrow-spacing': ['error', { before: true, after: true }],
-
     'react/prop-types': 'off',
     'react/react-in-jsx-scope': 'off',
+    'import/extensions': 'off',
+    'import/no-unresolved': 'off',
   },
 };

src/App.jsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import ClickMeButton from './components/ClickMeButton';
+import NumberButtons from './components/NumberButtons';
+
+export default function App() {
+  const [counterNumber, setCounterNumber] = useState(0);
+
+  function handlerClickButton({ number }) {
+    setCounterNumber(counterNumber + number);
+  }
+
+  return (
+    <div>
+      <p>Counter</p>
+      <ClickMeButton
+        counterNumber={counterNumber}
+        onClick={handlerClickButton}
+        whatNumberToAdd={1}
+      />
+      <br />
+      <NumberButtons onClick={handlerClickButton} />
+    </div>
+  );
+}

src/components/ClickMeButton.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default function ClickMeButton({
+  counterNumber,
+  onClick,
+  whatNumberToAdd,
+}) {
+  return (
+    <button type="button" onClick={() => onClick({ number: whatNumberToAdd })}>
+      Click me ({counterNumber})
+    </button>
+  );
+}

src/components/NumberButtons.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function NumberButtons({ handlerClickButton }) {
+  return [1, 2, 3, 4, 5].map((i) => (
+    <button type="button" onClick={() => handlerClickButton({ number: i })}>
+      {i}
+    </button>
+  ));
+}

src/index.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('app'));