diff --git a/.babelrc b/.babelrc
index ec29cf4..28b1125 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,8 +1,5 @@
 {
-  "presets": [
-    "@babel/preset-env",
-    "@babel/preset-react"
-  ],
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
   "plugins": [
     "@babel/plugin-transform-runtime",
     [
@@ -15,9 +12,10 @@
           "@styles": "./src/styles",
           "@views": "./src/views",
           "@utils": "./src/utils",
-          "@components": "./src/components"
+          "@components": "./src/components",
+          "@hooks": "./src/hooks"
         }
       }
     ]
   ]
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index c92f73c..70a2f96 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
     "recoil": "^0.1.3",
     "sass": "^1.32.8",
     "sass-loader": "^11.0.1",
-    "socket.io-client": "2.3.1",
+    "socket.io-client": "^4.1.3",
     "style-loader": "^2.0.0",
     "swr": "^0.5.6",
     "uuid": "3.4.0",
diff --git a/src/App.jsx b/src/App.jsx
index 04277da..f94ccec 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -27,8 +27,8 @@ function App() {
             <Switch>
               <Route exact path="/" component={Timetable} />
               <Route exact path="/login" component={Login} />
-              <Route exact path="/chatrooms" component={Chatrooms} />
-              <Route path="/chat" component={ChatroomPage} />
+              <Route exact path="/chatroom" component={Chatrooms} />
+              <Route path="/chatroom/:chatRoomId" component={ChatroomPage} />
               <Route exact path="/notice" component={Notice} />
               <Route exact path="/admin" component={Admin} />
               <Route exact path="/privacy_policy" component={PrivacyPolicy} />
diff --git a/src/hooks/useInput.js b/src/hooks/useInput.js
new file mode 100644
index 0000000..2407521
--- /dev/null
+++ b/src/hooks/useInput.js
@@ -0,0 +1,12 @@
+import { useCallback, useState } from 'react';
+
+const useInput = initialData => {
+  const [value, setValue] = useState(initialData);
+
+  const handler = useCallback(e => {
+    setValue(e.target.value);
+  }, []);
+  return [value, handler, setValue];
+};
+
+export default useInput;
diff --git a/src/states/Chatroom.js b/src/states/Chatroom.js
index 8fe7692..fc35e05 100644
--- a/src/states/Chatroom.js
+++ b/src/states/Chatroom.js
@@ -1,10 +1,30 @@
-import { atom } from 'recoil';
+import { atom, selectorFamily } from 'recoil';
+import { API_FIND_CHATROOM, API_GET_MESSAGES, requestAPI } from '../utils/api';
 
 const chatroomState = atom({
   key: 'chatroomList',
-  default: []
+  default: [],
 });
 
-export {
-    chatroomState,
-};
+const messagesState = atom({
+  key: 'messageList',
+  default: [],
+});
+
+const emptyMsg = atom({
+  key: 'emptyMsg',
+  default: null,
+});
+
+const currentChatRoom = selectorFamily({
+  key: 'currentChatRoom',
+  get: chatRoomId => async () => {
+    const { data: chatRoom } = await requestAPI(API_FIND_CHATROOM().setPathParam(chatRoomId));
+    const { data: messages } = await requestAPI(
+      API_GET_MESSAGES().setQuery({ chatRoomId, start: 0, end: 10 }),
+    );
+    return { chatRoom, messages };
+  },
+});
+
+export { messagesState, chatroomState, emptyMsg, currentChatRoom };
diff --git a/src/utils/api.js b/src/utils/api.js
index 4628574..8952681 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -66,7 +66,7 @@ export const API_UPDATE_LECTURES = makeAPI(PATCH, '/lecture');
 export const API_GET_HISTORIES = makeAPI(GET, '/history');
 
 const axiosInstance = axios.create({
-  baseURL: 'http://localhost:2021/api',
+  baseURL: `${API_URL_BASE}/api`,
   timeout: 20000,
 });
 
diff --git a/src/views/chat/chatMessage.jsx b/src/views/chat/chatMessage.jsx
index 2b842f7..d1bb26f 100644
--- a/src/views/chat/chatMessage.jsx
+++ b/src/views/chat/chatMessage.jsx
@@ -84,10 +84,10 @@ const useStyles = makeStyles({
     margin: '0px 1px 0px 1px',
   },
   content: {
-    maxWidth: '90%',
-    fontSize: '0.9rem',
+    maxWidth: '40%',
+    fontSize: '1.1rem',
     margin: '0px 1px 0px 1px',
-    padding: '0px 6px 0px 6px',
+    padding: '5px 10px',
     borderRadius: '5px',
   },
   from: {
diff --git a/src/views/chat/chatroom.jsx b/src/views/chat/chatroom.jsx
index 8a4e865..7c947cf 100644
--- a/src/views/chat/chatroom.jsx
+++ b/src/views/chat/chatroom.jsx
@@ -1,31 +1,38 @@
 import React, { useEffect, useRef, useState } from 'react';
 import ContentEditable from 'react-contenteditable';
-import { Menu, MenuItem, Button, Container, makeStyles, Typography } from '@material-ui/core';
+import { Button, Container, makeStyles, Typography } from '@material-ui/core';
 import IconButton from '@material-ui/core/IconButton';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import ExitToAppIcon from '@material-ui/icons/ExitToApp';
+import { Redirect, useHistory, useParams } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+import useInput from '@hooks/useInput';
 import { v4 as uuidv4 } from 'uuid';
-import { API_FIND_CHATROOM, API_GET_MESSAGES, API_GET_POINTS, requestAPI } from '../../utils/api';
+import usersIcon from '@img/fontawesome/chat-users.svg';
+import userIcon from '@img/fontawesome/chat-user.svg';
 import { StatusCodes } from 'http-status-codes';
+import { uosYellow } from '@utils/styles/Colors';
 import ChatMessage from './chatMessage';
+import { API_GET_MESSAGES, requestAPI } from '../../utils/api';
 import { getSocket } from '../../utils/socket';
-import { Redirect, useHistory } from 'react-router';
-import { uosYellow } from '@utils/styles/Colors';
 import UserInfoDialog from '../../components/UserInfoDialog';
-import userIcon from '@img/fontawesome/chat-user.svg';
-import usersIcon from '@img/fontawesome/chat-users.svg';
 import RoomInfoMenu from './RoomInfoMenu';
 import MainMenu from './MainMenu';
+import { currentChatRoom } from '../../states/Chatroom';
 
-export default function Chatroom({ id }) {
-  const [chatRoom, setChatRoom] = useState({});
-  const [messages, setMessages] = useState([]);
+export default function Chatroom() {
+  const { chatRoomId } = useParams();
+  const { chatRoom: initChatRoom, messages: initMessages } = useRecoilValue(
+    currentChatRoom(chatRoomId),
+  );
+  const [messages, setMessages] = useState(initMessages);
+  const [chatRoom, setChatRoom] = useState(initChatRoom);
   const [readPoints, setReadPoints] = useState([]);
   const [emptyMsg, setEmptyMsg] = useState('');
   const [infoOpen, setInfoOpen] = useState(false);
   const [menuAnchorEl, setMenuAnchorEl] = useState(null);
   const [infoAnchorEl, setInfoAnchorEl] = useState(null);
-  const [input, setInput] = useState('');
+  const [input, handleInput, setInput] = useInput('');
 
   const classes = useStyles();
 
@@ -47,7 +54,6 @@ export default function Chatroom({ id }) {
   if (!userId) {
     return <Redirect to="/login" />;
   }
-  const chatRoomId = id;
   const socket = getSocket();
   const menuOption = ['채팅방 이름 변경', '참여자 목록', '채팅방 나가기'];
   const loadUnit = 100;
@@ -77,8 +83,8 @@ export default function Chatroom({ id }) {
     messageRef.current = newMessages;
 
     socket.emit('read', {
-      chatRoomId: chatRoomId,
-      userId: userId,
+      chatRoomId,
+      userId,
       messageIdx: range.current.end,
     });
   };
@@ -115,64 +121,11 @@ export default function Chatroom({ id }) {
     socket.on('message', onMessageEvent);
     socket.on('read', onReadEvent);
 
-    const getChatRoom = async chatRoomId => {
-      const response = await requestAPI(API_FIND_CHATROOM().setPathParam(chatRoomId));
-
-      if (response.status !== StatusCodes.OK) {
-        setEmptyMsg('데이터를 불러오는데 실패했습니다.');
-
-        history.push('/chatrooms');
-
-        throw new Error();
-      }
-
-      setChatRoom(response.data);
-      chatRoomRef.current = response.data;
-
-      return response.data;
-    };
-
-    const getMessages = async (chatRoomId, start, end) => {
-      if (end < 0) return;
-
-      const response = await requestAPI(API_GET_MESSAGES().setQuery({ chatRoomId, start, end }));
-
-      if (response.status !== StatusCodes.OK) {
-        setEmptyMsg('채팅을 불러오는데 실패했습니다.');
-        return;
-      }
-      setMessages(response.data);
-      messageRef.current = response.data;
-    };
-
-    const getReadPoints = async chatRoomId => {
-      const response = await requestAPI(API_GET_POINTS().setQuery({ chatRoomId }));
-
-      if (response.status !== StatusCodes.OK) {
-        setEmptyMsg('데이터를 불러오는데 실패했습니다.');
-        return;
-      }
-      setReadPoints(response.data);
-      readPointRef.current = response.data;
-    };
-
-    getChatRoom(chatRoomId)
-      .then(room => {
-        const start = room.length > loadUnit ? room.length - loadUnit : 0;
-        const end = room.length > 0 ? room.length - 1 : 0;
-
-        range.current = { start, end };
-
-        getMessages(chatRoomId, start, end);
-        getReadPoints(chatRoomId);
-
-        socket.emit('read', {
-          chatRoomId: chatRoomId,
-          userId: userId,
-          messageIdx: range.current.end,
-        });
-      })
-      .catch(() => {});
+    socket.emit('read', {
+      chatRoomId,
+      userId,
+      messageIdx: 10,
+    });
 
     return () => {
       socket.off('read');
@@ -186,10 +139,6 @@ export default function Chatroom({ id }) {
     document.execCommand('insertText', false, text);
   };
 
-  const onChange = e => {
-    setInput(e.target.value);
-  };
-
   const onEnterPress = e => {
     if (e.key === 'Enter') {
       e.preventDefault();
@@ -208,7 +157,6 @@ export default function Chatroom({ id }) {
         type: 'normal',
         content: input,
       };
-
       socket.emit('message', messageEvent);
 
       const newMessages = messageRef.current.concat(messageEvent);
@@ -348,7 +296,7 @@ export default function Chatroom({ id }) {
           tagName="div"
           html={input}
           onPaste={onPaste}
-          onChange={onChange}
+          onChange={handleInput}
           onKeyPress={onEnterPress}
         />
         <Button className={classes.sendBtn} onClick={send} ref={sendBtnRef}>
@@ -375,6 +323,7 @@ const useStyles = makeStyles({
   },
   titleContainer: {
     padding: '0',
+    marginBottom: '3px',
     height: '100%',
     display: 'flex',
     alignItems: 'center',
@@ -413,6 +362,8 @@ const useStyles = makeStyles({
     margin: '0px',
     overflowY: 'auto',
     padding: '0',
+    display: 'flex',
+    flexDirection: 'column-reverse',
   },
   msgOl: {
     padding: '0',
diff --git a/src/views/chat/index.jsx b/src/views/chat/index.jsx
index 3d3dfac..bc785f3 100644
--- a/src/views/chat/index.jsx
+++ b/src/views/chat/index.jsx
@@ -1,19 +1,16 @@
-import React from 'react';
-import { Button, Container, makeStyles, Typography } from '@material-ui/core';
-import queryString from 'query-string';
+import React, { Suspense } from 'react';
+import { Container, makeStyles } from '@material-ui/core';
+import Loading from '../../components/Loading';
 import Chatroom from './chatroom';
 
-export default function ChatroomPage({ location, history }) {
-  const chatRoomId = queryString.parse(location.search).id;
+export default function ChatroomPage() {
   const classes = useStyles();
 
-  const returnToList = () => {
-    history.push('/chatrooms');
-  };
-
   return (
     <Container className={classes.root}>
-      <Chatroom id={chatRoomId} />
+      <Suspense fallback={<Loading />}>
+        <Chatroom />
+      </Suspense>
     </Container>
   );
 }
diff --git a/src/views/chatrooms/chatroomList.jsx b/src/views/chatrooms/chatroomList.jsx
index 0c36d07..f62e95e 100644
--- a/src/views/chatrooms/chatroomList.jsx
+++ b/src/views/chatrooms/chatroomList.jsx
@@ -7,31 +7,34 @@ import { chatroomState } from '../../states/Chatroom';
 import userIcon from '@img/fontawesome/chat-user.svg';
 import usersIcon from '@img/fontawesome/chat-users.svg';
 
-export default function ChatroomList({rooms, onClick}) {
+export default function ChatroomList({ rooms, onClick }) {
   const classes = useStyles();
 
   return (
     <Container className={classes.root}>
-      {rooms.map(room => <Chatroom key={room.id} info={room} onClick={onClick} />)}
+      {rooms.map(room => (
+        <Chatroom key={room.id} info={room} onClick={onClick} />
+      ))}
     </Container>
   );
 }
 
-function Chatroom({info}) {
+function Chatroom({ info }) {
   const [chatrooms, setChatrooms] = useRecoilState(chatroomState);
   const history = useHistory();
 
   const classes = useChatroomStyles();
 
   const userId = window.localStorage.getItem('userID');
-  const participants = info.participants.find(p => p._id !== userId).name 
-                        + (info.participants.length > 2 ? ` 외 ${info.participants.length-2}명` : '');                        
+  const participants =
+    info.participants.find(p => p._id !== userId).name +
+    (info.participants.length > 2 ? ` 외 ${info.participants.length - 2}명` : '');
 
-  const onClick = (e) => {
+  const onClick = e => {
     const chatRoomId = e.target.getAttribute('name');
 
     const newChatrooms = chatrooms.map(room => {
-      if(room.id === chatRoomId) {
+      if (room.id === chatRoomId) {
         const newRoom = { ...room };
         newRoom.new = 0;
 
@@ -42,23 +45,20 @@ function Chatroom({info}) {
 
     setChatrooms(newChatrooms);
 
-    history.push(`/chat?id=${info.id}`);
-  }
-                      
+    history.push(`/chatroom/${info.id}`);
+  };
 
   return (
     <Container className={classes.root} onClick={onClick}>
       <img className={classes.img} src={info.participants.length > 2 ? usersIcon : userIcon} />
       <Container className={classes.body}>
         <Container className={classes.title}>
-          <Typography className={classes.name}>{ info.name }</Typography>
-          <Typography className={classes.participants}>{ participants }</Typography>
+          <Typography className={classes.name}>{info.name}</Typography>
+          <Typography className={classes.participants}>{participants}</Typography>
         </Container>
         <Container className={classes.contents}>
-          <Typography className={classes.topMessage}>
-            { info.topMessage }
-          </Typography>
-          { info.new > 0 ? <Box className={classes.newCnt}>{info.new}</Box> : null }
+          <Typography className={classes.topMessage}>{info.topMessage}</Typography>
+          {info.new > 0 ? <Box className={classes.newCnt}>{info.new}</Box> : null}
         </Container>
       </Container>
     </Container>
@@ -67,8 +67,8 @@ function Chatroom({info}) {
 
 const useStyles = makeStyles({
   root: {
-    padding: '0'
-  }
+    padding: '0',
+  },
 });
 
 const useChatroomStyles = makeStyles({
@@ -80,26 +80,26 @@ const useChatroomStyles = makeStyles({
     alignItems: 'center',
     '&:hover': {
       cursor: 'pointer',
-      backgroundColor: '#DFDFDF'
+      backgroundColor: '#DFDFDF',
     },
     '&:active': {
-      backgroundColor: '#C0C0C0'
-    }
+      backgroundColor: '#C0C0C0',
+    },
   },
   img: {
     width: '40px',
     height: '40px',
-    marginLeft: '5px'
+    marginLeft: '5px',
   },
   body: {
-    padding: '0px 5px 0px 10px'
+    padding: '0px 5px 0px 10px',
   },
   title: {
     display: 'flex',
     marginBottom: '4px',
     padding: '0',
     justifyContent: 'space-between',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   name: {
     height: '1.2rem',
@@ -107,12 +107,12 @@ const useChatroomStyles = makeStyles({
     fontSize: '1rem',
     textOverflow: 'ellipsis',
     overflow: 'hidden',
-    whiteSpace: 'nowrap'
+    whiteSpace: 'nowrap',
   },
   participants: {
     fontSize: '0.6rem',
     whiteSpace: 'nowrap',
-    margin: '0px 5px 0px 5px'
+    margin: '0px 5px 0px 5px',
   },
   contents: {
     display: 'flex',
@@ -132,7 +132,7 @@ const useChatroomStyles = makeStyles({
     verticalAlign: 'middle',
     fontWeight: '700',
     fontSize: '0.7rem',
-    whiteSpace: 'nowrap'
+    whiteSpace: 'nowrap',
   },
   topMessage: {
     width: '85%',
@@ -143,6 +143,6 @@ const useChatroomStyles = makeStyles({
     fontSize: '0.8rem',
     textOverflow: 'ellipsis',
     overflow: 'hidden',
-    whiteSpace: 'nowrap'
-  }
-})
\ No newline at end of file
+    whiteSpace: 'nowrap',
+  },
+});