Skip to content

Commit d0935c7

Browse files
gustn99gustn99
authored
Merge pull request #44 from happbob/feat/OD-28
Refactor: 채팅방 불필요한 리렌더링 방지
2 parents e453830 + 9493dd0 commit d0935c7

7 files changed

Lines changed: 73 additions & 64 deletions

File tree

‎src/pages/Chats/ChatRoom/ChatBox/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ const ChatBox: React.FC = () => {
3737
const onChangeMessage = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {
3838
setNewMessage(e.target.value);
3939
};
40+
4041
const sendNewMessage = (): void => {
4142
if (newMessage === '') {
4243
return;

‎src/pages/Chats/ChatRoom/DateBar/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import React from 'react';
12
import { StyledText } from '../../../../components/Text/StyledText';
23
import theme from '../../../../styles/theme';
34
import { DatebarLayout, DateWrapper, Divider } from './styles';
@@ -6,7 +7,7 @@ interface DateBarProps {
67
formattedDate: string; // yyyy년 MM월 dd일 EEEE
78
}
89

9-
const DateBar: React.FC<DateBarProps> = ({ formattedDate }) => {
10+
const DateBar: React.FC<DateBarProps> = React.memo(({ formattedDate }) => {
1011
return (
1112
<DatebarLayout>
1213
<Divider />
@@ -22,6 +23,6 @@ const DateBar: React.FC<DateBarProps> = ({ formattedDate }) => {
2223
<Divider />
2324
</DatebarLayout>
2425
);
25-
};
26+
});
2627

2728
export default DateBar;

‎src/pages/Chats/ChatRoom/DateBar/styles.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import styled from 'styled-components';
33
export const DatebarLayout = styled.div`
44
display: flex;
55
width: 100%;
6-
margin: 1.25rem auto 1rem auto;
6+
margin: 1.2rem auto 1rem auto;
77
gap: 0.5rem;
88
`;
99

‎src/pages/Chats/ChatRoom/RcvdMessage/index.tsx‎

Lines changed: 44 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,56 @@
1+
import React from 'react';
12
import { StyledText } from '../../../../components/Text/StyledText';
23
import theme from '../../../../styles/theme';
34
import { RcvdMessageProps } from '../../dto';
45
import { FirstMessageLayout, UserImage, UsernameText, MessageBox, Message, TimeWrapper, MessageLayout } from './styles';
56

6-
const RcvdMessage: React.FC<RcvdMessageProps & { onClickProfile: () => void }> = ({
7-
fromUserName,
8-
profilePictureUrl,
9-
content,
10-
isFirst,
11-
isSenderChanged,
12-
isPrintTime,
13-
formattedTime,
14-
onClickProfile,
15-
}) => {
16-
if (isFirst) {
17-
return (
18-
<>
19-
{isSenderChanged && <div style={{ margin: '0', padding: '0', height: '1rem' }} />}
20-
<FirstMessageLayout>
21-
<UserImage onClick={onClickProfile} src={profilePictureUrl} alt="프로필 사진" />
22-
<MessageBox>
23-
<UsernameText onClick={onClickProfile} style={{ cursor: 'pointer' }} color={theme.colors.black}>
24-
{fromUserName}
25-
</UsernameText>
7+
const RcvdMessage: React.FC<RcvdMessageProps & { onClickProfile: () => void }> = React.memo(
8+
({
9+
fromUserName,
10+
profilePictureUrl,
11+
content,
12+
isFirst,
13+
isSenderChanged,
14+
isPrintTime,
15+
formattedTime,
16+
onClickProfile,
17+
}) => {
18+
if (isFirst) {
19+
return (
20+
<>
21+
{isSenderChanged && <div style={{ margin: '0', padding: '0', height: '1rem' }} />}
22+
<FirstMessageLayout>
23+
<UserImage onClick={onClickProfile} src={profilePictureUrl} alt="프로필 사진" />
24+
<MessageBox>
25+
<UsernameText onClick={onClickProfile} style={{ cursor: 'pointer' }} color={theme.colors.black}>
26+
{fromUserName}
27+
</UsernameText>
28+
<Message>
29+
<StyledText $textTheme={{ style: 'body6-regular', lineHeight: 1.1 }} color={theme.colors.black}>
30+
{content}
31+
</StyledText>
32+
</Message>
33+
</MessageBox>
34+
{isPrintTime && <TimeWrapper>{formattedTime}</TimeWrapper>}
35+
</FirstMessageLayout>
36+
</>
37+
);
38+
} else {
39+
return (
40+
<>
41+
{isSenderChanged && <div style={{ margin: '0', padding: '0', height: '2.25rem' }} />}
42+
<MessageLayout>
2643
<Message>
2744
<StyledText $textTheme={{ style: 'body6-regular', lineHeight: 1.1 }} color={theme.colors.black}>
2845
{content}
2946
</StyledText>
3047
</Message>
31-
</MessageBox>
32-
{isPrintTime && <TimeWrapper>{formattedTime}</TimeWrapper>}
33-
</FirstMessageLayout>
34-
</>
35-
);
36-
} else {
37-
return (
38-
<>
39-
{isSenderChanged && <div style={{ margin: '0', padding: '0', height: '2.25rem' }} />}
40-
<MessageLayout>
41-
<Message>
42-
<StyledText $textTheme={{ style: 'body6-regular', lineHeight: 1.1 }} color={theme.colors.black}>
43-
{content}
44-
</StyledText>
45-
</Message>
46-
{isPrintTime && <TimeWrapper>{formattedTime}</TimeWrapper>}
47-
</MessageLayout>
48-
</>
49-
);
50-
}
51-
};
48+
{isPrintTime && <TimeWrapper>{formattedTime}</TimeWrapper>}
49+
</MessageLayout>
50+
</>
51+
);
52+
}
53+
},
54+
);
5255

5356
export default RcvdMessage;

‎src/pages/Chats/ChatRoom/SentMessage/index.tsx‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,26 @@
1+
import React from 'react';
12
import { StyledText } from '../../../../components/Text/StyledText';
23
import theme from '../../../../styles/theme';
34
import { SentMessageProps } from '../../dto';
45
import { Message, TimeWrapper, MessageLayout } from './styles';
56

6-
const SentMessage: React.FC<SentMessageProps> = ({ content, isSenderChanged, isPrintTime, formattedTime }) => {
7-
return (
8-
<>
9-
{isSenderChanged && <div style={{ margin: '0', padding: '0', height: '1rem' }} />}
10-
<MessageLayout>
11-
{isPrintTime && <TimeWrapper>{formattedTime}</TimeWrapper>}
12-
<Message>
13-
<StyledText $textTheme={{ style: 'body6-regular', lineHeight: 1.1 }} color={theme.colors.black}>
14-
{content}
15-
</StyledText>
16-
</Message>
17-
</MessageLayout>
18-
</>
19-
);
20-
};
7+
const SentMessage: React.FC<SentMessageProps> = React.memo(
8+
({ content, isSenderChanged, isPrintTime, formattedTime }) => {
9+
return (
10+
<>
11+
{isSenderChanged && <div style={{ margin: '0', padding: '0', height: '1rem' }} />}
12+
<MessageLayout>
13+
{isPrintTime && <TimeWrapper>{formattedTime}</TimeWrapper>}
14+
<Message>
15+
<StyledText $textTheme={{ style: 'body6-regular', lineHeight: 1.1 }} color={theme.colors.black}>
16+
{content}
17+
</StyledText>
18+
</Message>
19+
</MessageLayout>
20+
{isPrintTime && <div style={{ margin: '0', padding: '0', height: '0.5rem' }}></div>}
21+
</>
22+
);
23+
},
24+
);
2125

2226
export default SentMessage;

‎src/pages/Chats/ChatRoom/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useState, useEffect, useRef } from 'react';
1+
import { useState, useEffect, useRef, useCallback } from 'react';
22
import { useNavigate, useParams } from 'react-router-dom';
33
import { useRecoilState, useRecoilValue } from 'recoil';
44
import { MessagesContainer } from './styles';
@@ -222,14 +222,14 @@ const ChatRoom: React.FC = () => {
222222
};
223223

224224
// 프로필 사진 클릭 시 프로필 페이지로 이동
225-
const onClickProfile = () => {
225+
const onClickProfile = useCallback(() => {
226226
const opponentId = opponentInfo?.id ? opponentInfo.id : -1;
227227
if (opponentId === -1) {
228228
setIsOpenCannotCheck(true);
229229
} else {
230230
nav(`/users/${opponentId}`);
231231
}
232-
};
232+
}, [opponentInfo, nav]);
233233

234234
return (
235235
<OODDFrame>

‎src/pages/Chats/ChatRoom/styles.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ export const MessagesContainer = styled.div`
66
display: flex;
77
flex: 1;
88
flex-direction: column;
9-
padding: 1rem 0.875rem 0 1.25rem;
10-
margin: 0 auto 5.2rem auto;
9+
padding: 1rem 0.875rem 0 0.875rem;
10+
margin: 0 auto 5.1rem auto;
1111
scroll-behavior: smooth;
1212
1313
&::-webkit-scrollbar {

0 commit comments

Comments
 (0)