From 4939f86636bfe4e597cbe935702deebc021eef57 Mon Sep 17 00:00:00 2001
From: huiji0315 <huiji0315@gmail.com>
Date: Thu, 27 May 2021 20:32:12 +0900
Subject: [PATCH] #2 useMemo

---
 .../begin-react/src/App.js"                              | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

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 a1b5568..11a31b7 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,7 +1,12 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useMemo } from 'react';
 import UserList from './UserList';
 import CreateUser from './CreateUser';
 
+function countActiveUsers(users) {
+  console.log('활성 사용자 수를 세는중...');
+  return users.filter(user => user.active).length;
+}
+
 function App() {
   const [inputs, setInputs] = useState({
     username: '',
@@ -64,6 +69,7 @@ function App() {
       )
     );
   };
+  const count = useMemo(() => countActiveUsers(users), [users]);
   return (
     <>
       <CreateUser
@@ -73,6 +79,7 @@ function App() {
         onCreate={onCreate}
       />
       <UserList users={users} onRemove={onRemove} onToggle={onToggle} />
+      <div>활성사용자 수 : {count}</div>
     </>
   );
 }