[4주차] 김철흥 미션 제출합니다. #19
Conversation
There was a problem hiding this comment.
아이콘을 사용하는 곳에서 스타일을 적용하는 대신 이렇게 사용하시는 이유가 있으신가요?
There was a problem hiding this comment.
저는 이 정도 간략한 컴포넌트는 페이지 내에서 작성하거나, 기프트/멀티프로필 버튼이 동일 양식을 가지고 있기 때문에 하나의 버튼 컴포넌트를 만들어서 props로 content와 svg를 넘겨받는 식으로 작성했을 것 같은데요, 철흥님은 어떤 기준으로 컴포넌트를 분리하시는지 궁금합니닷
There was a problem hiding this comment.
이런 방식에 익숙하지 않은 저로서는 하나의 페이지를 분석할 때 너무 많은 파일을 왔다갔다해야 한다는 점에서 약간의 불편함도 없진 않을 것 같은데요, 이렇게 icon과 constants를 import하는 방식의 장점이 뭐라고 생각하시나요?
There was a problem hiding this comment.
public의 friendList 데이터에 isUpdated를 추가하는 대신 별도의 mock 파일을 만드신 이유가 있나요?
| // 채팅방 이름을 가져오기 위한 채팅방 검색 | ||
| const selectedChatRoomMetaData = chatPreviewList.find( | ||
| (chatRoom) => `room-${chatRoom.roomId}` === `${roomId}` | ||
| ); |
There was a problem hiding this comment.
채팅방 클릭 시 채팅방 정보를 store에 저장하고, 채팅방 렌더링 시 이 store 값을 바탕으로 렌더링 해도 좋았을 것 같아요!
| {sortChatMessageByDate?.map((message, index) => { | ||
| const prevMessage = sortChatMessageByDate[index - 1]; | ||
| const nextMessage = sortChatMessageByDate[index + 1]; | ||
|
|
||
| const isSameSenderAsPrevious = | ||
| prevMessage?.senderId === message.senderId; | ||
|
|
||
| const showDateLabel = | ||
| index === 0 || !isSameDate(prevMessage?.sentAt, message.sentAt); | ||
|
|
||
| const isLastInTimeGroup = | ||
| !nextMessage || | ||
| nextMessage.senderId !== message.senderId || | ||
| !isSameTimeGroup(nextMessage.sentAt, message.sentAt); | ||
|
|
||
| return ( | ||
| <React.Fragment key={message.messageId}> | ||
| {showDateLabel && <ChatDate date={message.sentAt} />} | ||
| <ChatMessage | ||
| message={message} | ||
| showSenderInfo={!isSameSenderAsPrevious} | ||
| showTime={isLastInTimeGroup} | ||
| isLastMessage={index === sortChatMessageByDate.length - 1} | ||
| chatEndRef={chatEndRef} | ||
| /> | ||
| </React.Fragment> | ||
| ); | ||
| })} |
There was a problem hiding this comment.
return문 안에 메시지 렌더링 로직을 넣는 대신 별도의 함수로 분리하는 건 어떨까요? 저는 모조 데이터를 기반으로 렌더링에 필요한 정보들을 추가한 객체 배열을 반환하는 함수를 만들어 사용했습니다!
| <S.ChatRoomInputSection> | ||
| <S.InputOptionButton> | ||
| <I.ChatRoomPlusIcon /> | ||
| </S.InputOptionButton> | ||
|
|
||
| <S.ChatRoomInputForm onSubmit={handleSendChatMessage}> | ||
| <S.ChatTextareaContainer> | ||
| <S.ChatTextarea | ||
| autoFocus={true} | ||
| ref={chatInputRef} | ||
| rows={1} | ||
| placeholder="메세지를 입력하세요." | ||
| value={chatInputValue} | ||
| onChange={(e) => setChatInputValue(e.target.value)} | ||
| onKeyDown={handleKeyDown} | ||
| onCompositionStart={() => setIsComposing(true)} | ||
| onCompositionEnd={() => setIsComposing(false)} | ||
| /> | ||
| <S.EmojiButton> | ||
| <I.EmojiIcon /> | ||
| </S.EmojiButton> | ||
| </S.ChatTextareaContainer> | ||
|
|
||
| {chatInputValue.trim() !== '' ? ( | ||
| <S.SendButton | ||
| type="submit" | ||
| initial={{ y: '1px', opacity: 0 }} | ||
| animate={{ y: '0', opacity: 1 }} | ||
| exit={{ y: '1px', opacity: 0 }} | ||
| transition={{ duration: 0.3, ease: 'easeInOut' }} | ||
| onClick={handleSendMessage} | ||
| > | ||
| <I.SendIcon /> | ||
| </S.SendButton> | ||
| ) : ( | ||
| <S.InputOptionButton> | ||
| <I.HashtagIcon /> | ||
| </S.InputOptionButton> | ||
| )} | ||
| </S.ChatRoomInputForm> | ||
| </S.ChatRoomInputSection> |
There was a problem hiding this comment.
이전에 버튼 같은 부분보다는 전 이런 부분을 별도의 컴포넌트로 분리할 것 같기는 합니다! return하는 양 자체도 많은 데다가 메시지를 store로 관리하는 만큼 input 관련 로직도 함께 분리하여 가독성을 높일 수 있었을 것 같아요!
🔗 Deploy URL
Messenger
🫥 디자이너와의 협업 관련
Key Question
1. React Router의 동적 라우팅(Dynamic Routing)이란 무엇이며, 언제 사용하나요?
2. 네트워크 속도가 느린 환경에서 사용자 경험을 개선하기 위해 사용할 수 있는 UI/UX 디자인 전략과 기술적 최적화 방법
3. React에서 useState와 useReducer를 활용한 지역 상태 관리와 Context API 및 전역 상태 관리 라이브러리의 차이점