[Fix] useCallback을 사용한 리렌더링 방지

front/src/components/Personnel.js

@@ -50,26 +50,36 @@ const Personnel = ({ close }) => {
     });
   }, [dispatch]);
 
-  const increaseLittle = useCallback(name => {
-    dispatch({
-      type: 'INCREASE_LITTLE',
-      name
-    });
-  }, [dispatch]);
+  const increaseLittle = useCallback(
+    name => {
+      dispatch({
+        type: 'INCREASE_LITTLE',
+        name
+      });
+    },
+    [dispatch]
+  );
 
-  const decreaseLittle = useCallback(name => {
-    dispatch({
-      type: 'DECREASE_LITTLE',
-      name
-    });
-  }, [dispatch]);
+  const decreaseLittle = useCallback(
+    name => {
+      dispatch({
+        type: 'DECREASE_LITTLE',
+        name
+      });
+    },
+    [dispatch]
+  );
 
   const reset = useCallback(() => {
     dispatch({
       type: 'RESET'
     });
   }, [dispatch]);
 
+  const closeAndSave = () => {
+    close();
+  };
+
   return (
     <Container>
       <PersonnelRow
@@ -83,26 +93,26 @@ const Personnel = ({ close }) => {
         text={'어린이'}
         age={'2~12세'}
         value={child}
-        increase={increaseLittle.bind(null, 'child')}
-        decrease={decreaseLittle.bind(null, 'child')}
+        increase={useCallback(increaseLittle.bind(null, 'child'), [])}
+        decrease={useCallback(decreaseLittle.bind(null, 'child'), [])}
       />
       <PersonnelRow
         text={'유아'}
         age={'2세 미만'}
         value={baby}
-        increase={increaseLittle.bind(null, 'baby')}
-        decrease={decreaseLittle.bind(null, 'baby')}
+        increase={useCallback(increaseLittle.bind(null, 'baby'), [])}
+        decrease={useCallback(decreaseLittle.bind(null, 'baby'), [])}
       />
       <Row>
         <Text onClick={reset}>{adult + child + baby === 0 || '삭제'}</Text>
-        <Text onClick={close}>저장</Text>
+        <Text onClick={closeAndSave}>저장</Text>
       </Row>
     </Container>
   );
 };
 
 Personnel.propTypes = {
   close: PropTypes.func.isRequired
-}
+};
 
 export default React.memo(Personnel);

front/src/components/Room/RoomContainer.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { gql } from 'apollo-boost';
 import { useMutation } from '@apollo/react-hooks';
@@ -48,7 +48,7 @@ const RoomContainer = ({
   const pDispatch = usePersonnelDispatch();
 
   const isPerson = adult !== 0 || child !== 0 || baby !== 0;
-  const createReservation = async () => {
+  const createReservation = useCallback(async () => {
     try {
       if (checkIn < new Date() || !isPerson) {
         throw Error();
@@ -73,7 +73,15 @@ const RoomContainer = ({
         '예약에 실패하셨습니다. \n인원과 날짜를 선택했는지 확인해주세요.'
       );
     }
-  };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    checkIn,
+    checkOut,
+    createReservationMutation,
+    id,
+    pDispatch,
+    rDispatch
+  ]);
   return (
     <RoomPresenter
       createReservation={createReservation}
@@ -102,4 +110,4 @@ RoomContainer.propTypes = {
   bedroom: PropTypes.number
 };
 
-export default RoomContainer;
+export default React.memo(RoomContainer);

front/src/components/Room/RoomPresenter.js

@@ -108,4 +108,4 @@ const RoomPresenter = ({
   );
 };
 
-export default RoomPresenter;
+export default React.memo(RoomPresenter);

front/src/routes/Rooms.js

@@ -94,4 +94,4 @@ const Rooms = () => {
   );
 };
 
-export default Rooms;
+export default React.memo(Rooms);

server/package.json

@@ -8,7 +8,7 @@
   "scripts": {
     "dev": "nodemon --exec babel-node src/server.js --delay 2",
     "build": "babel src --out-dir build",
-    "postbuild": "copy ./src/api/**/*.graphql ./build/api",
+    "postbuild": "copy -R ./src/api/**/*.graphql ./build/api",
     "start": "NODE_ENV=production yarn run build && pm2 start build/server.js"
   },
   "dependencies": {

server/src/authController.js

@@ -32,5 +32,9 @@ export const naverLoginCallback = async (
 export const createToken = (req, res) => {
   const token = generateToken({ id: req.user.id });
   res.cookie('token', token);
-  res.redirect('http://localhost:3000');
+  const address =
+    process.env.NODE_ENV === 'production'
+      ? `http://${process.env.DB_PORT}`
+      : 'http://localhost:3000';
+  res.redirect(address);
 };

server/src/seeders/20191015040253-user.js

@@ -4,7 +4,7 @@ export default {
   up: async (queryInterface, Sequelize) => {
     const saltRounds = 10;
     return queryInterface.bulkInsert(
-      'Users',
+      'users',
       [
         {
           name: 'KyuKyu',
@@ -23,6 +23,6 @@ export default {
     );
   },
   down: (queryInterface, Sequelize) => {
-    return queryInterface.bulkDelete('Users', null, {});
+    return queryInterface.bulkDelete('users', null, {});
   }
 };

server/src/seeders/20191015041707-room.js

@@ -9,11 +9,11 @@ export default {
       row = { ...row, price: row.price * 1000 };
       return row;
     });
-    return queryInterface.bulkInsert('Rooms', jsonArray, {});
+    return queryInterface.bulkInsert('rooms', jsonArray, {});
   },
 
   down: (queryInterface, Sequelize) => {
-    return queryInterface.bulkDelete('Rooms', null, {});
+    return queryInterface.bulkDelete('rooms', null, {});
   }
 };