From 23b372a0fdb84f438faefaaef52a8fde8912b740 Mon Sep 17 00:00:00 2001
From: huiji0315 <huiji0315@gmail.com>
Date: Thu, 27 May 2021 21:27:20 +0900
Subject: [PATCH] #2 useCallback

---
 .../begin-react/src/App.js"                   | 53 +++++++++++--------
 1 file changed, 31 insertions(+), 22 deletions(-)

diff --git "a/2\354\243\274\354\260\250\353\246\254\354\225\241\355\212\270/\354\236\245\355\235\254\354\247\200/begin-react/src/App.js" "b/2\354\243\274\354\260\250\353\246\254\354\225\241\355\212\270/\354\236\245\355\235\254\354\247\200/begin-react/src/App.js"
index 11a31b7..e74833b 100644
--- "a/2\354\243\274\354\260\250\353\246\254\354\225\241\355\212\270/\354\236\245\355\235\254\354\247\200/begin-react/src/App.js"
+++ "b/2\354\243\274\354\260\250\353\246\254\354\225\241\355\212\270/\354\236\245\355\235\254\354\247\200/begin-react/src/App.js"
@@ -1,4 +1,4 @@
-import React, { useRef, useState, useMemo } from 'react';
+import React, { useRef, useState, useMemo, useCallback } from 'react';
 import UserList from './UserList';
 import CreateUser from './CreateUser';
 
@@ -13,13 +13,16 @@ function App() {
     email: ''
   });
   const { username, email } = inputs;
-  const onChange = e => {
-    const { name, value } = e.target;
-    setInputs({
-      ...inputs,
-      [name]: value
-    });
-  };
+  const onChange = useCallback(
+    e => {
+      const { name, value } = e.target;
+      setInputs({
+        ...inputs,
+        [name]: value
+      });
+    },
+    [inputs]
+  );
   const [users, setUsers] = useState([
     {
       id: 1,
@@ -42,7 +45,7 @@ function App() {
   ]);
 
   const nextId = useRef(4);
-  const onCreate = () => {
+  const onCreate = useCallback(() => {
     const user = {
       id: nextId.current,
       username,
@@ -55,20 +58,26 @@ function App() {
       email: ''
     });
     nextId.current += 1;
-  };
+  }, [users, username, email]);
 
-  const onRemove = id => {
-    // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
-    // = user.id 가 id 인 것을 제거함
-    setUsers(users.filter(user => user.id !== id));
-  };
-  const onToggle = id => {
-    setUsers(
-      users.map(user =>
-        user.id === id ? { ...user, active: !user.active } : user
-      )
-    );
-  };
+  const onRemove = useCallback(
+    id => {
+      // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
+      // = user.id 가 id 인 것을 제거함
+      setUsers(users.filter(user => user.id !== id));
+    },
+    [users]
+  );
+  const onToggle = useCallback(
+    id => {
+      setUsers(
+        users.map(user =>
+          user.id === id ? { ...user, active: !user.active } : user
+        )
+      );
+    },
+    [users]
+  );
   const count = useMemo(() => countActiveUsers(users), [users]);
   return (
     <>