Skip to content

Commit 007946a

Browse files
gustn99gustn99
committed
Refactor: 바텀시트 열고 닫을 때 채팅방의 불필요한 리렌더링 방지
1 parent 7d6b64f commit 007946a

4 files changed

Lines changed: 68 additions & 61 deletions

File tree

‎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/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: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
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+
</>
21+
);
22+
},
23+
);
2124

2225
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>

0 commit comments

Comments
 (0)