Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
React 김주동 sprint6
* First commit Sprint Mission5 on React * Sprint mission 6 commit. * Sprint Mission 6 Update 1 * update sprint mission 6 * Sprint mission 6 update commit. * delete .bak files * Update Comments * modify ItemComment
GANGYIKIM
approved these changes
Nov 5, 2024
| try { | ||
| const query = new URLSearchParams(params).toString(); | ||
| const response = await fetch( | ||
| `https://panda-market-api.vercel.app/articles/${articleId}/comments?${query}` |
There was a problem hiding this comment.
P3:
공통으로 사용되는 기본 주소는 변수에 저장해두고 쓰셔도 좋을 것 같아요
Suggested change
| `https://panda-market-api.vercel.app/articles/${articleId}/comments?${query}` | |
| `${BASE_URL}/articles/${articleId}/comments?${query}` |
|
|
||
| type ArticleItemProps = { | ||
| interface ArticleItemProps { |
There was a problem hiding this comment.
P3:
interface로 바꿔주신것 좋습니다 👍
| {article.writer.nickname} <Timestamp>{dateString}</Timestamp> | ||
| </ArticleInfoDiv> | ||
| <ArticleInfoWrapper> | ||
| <ArticleInfo article={article} /> |
There was a problem hiding this comment.
P3:
기존 ArticleInfoDiv에서 ArticleInfo 태그명을 빼주신게 좋네요.
| <CommentSectionTitle>댓글 달기</CommentSectionTitle> | ||
|
|
||
| <TextArea | ||
| placeholder={"댓글을 입력해 주세요."} |
There was a problem hiding this comment.
P3:
Suggested change
| placeholder={"댓글을 입력해 주세요."} | |
| placeholder="댓글을 입력해 주세요." |
Comment on lines
+19
to
+21
| const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => { | ||
| setComment(e.target.value); | ||
| }; |
There was a problem hiding this comment.
P2:
이렇게 인풋값이 입력될때마다 state를 바꿔주는 경우 debounce를 통해 이벤트를 묶어 실행해주시는 것이 좋습니다.
그렇게 되면 리렌더링되는 횟수를 줄일 수 있습니다.
| const ArticlePageCommentThread: React.FC<ArticlePageCommentThreadProps> = ({ | ||
| articleId, | ||
| }) => { | ||
| const [comments, setComments] = useState<Comment[]>([]); |
Comment on lines
+23
to
+44
| useEffect(() => { | ||
| if (!articleId) return; | ||
|
|
||
| const fetchComments = async () => { | ||
| setIsLoading(true); | ||
|
|
||
| try { | ||
| const response: CommentListResponse = await getArticleComments({ | ||
| articleId, | ||
| }); | ||
| setComments(response.list); | ||
| setError(null); | ||
| } catch (error) { | ||
| console.error("Error fetching comments:", error); | ||
| setError("게시글의 댓글을 불러오지 못했어요."); | ||
| } finally { | ||
| setIsLoading(false); | ||
| } | ||
| }; | ||
|
|
||
| fetchComments(); | ||
| }, [articleId]); |
There was a problem hiding this comment.
P3:
아래처럼 fetchComments 함수를 useEffect 외부로 빼셔도 됩니다.
이렇게 되면 로직이 분리되어 가독성에도 도움이 됩니다.
const fetchComments = useCallback(async () => {
setIsLoading(true);
try {
const response: CommentListResponse = await getArticleComments({
articleId,
});
setComments(response.list);
setError(null);
} catch (error) {
console.error("Error fetching comments:", error);
setError("게시글의 댓글을 불러오지 못했어요.");
} finally {
setIsLoading(false);
}
});
useEffect(() => {
if (!articleId) return;
fetchComments();
}, [articleId, fetchComments]);
Comment on lines
+54
to
+67
| if (comments && !comments.length) { | ||
| return ( | ||
| <EmptyState text={`아직 댓글이 없어요,\n지금 댓글을 달아 보세요!`} /> | ||
| ); | ||
| } else { | ||
| return ( | ||
| <ThreadContainer> | ||
| {comments.map((item) => ( | ||
| <CommentItem item={item} key={`comment-${item.id}`} /> | ||
| ))} | ||
| </ThreadContainer> | ||
| ); | ||
| } | ||
| }; |
There was a problem hiding this comment.
P2:
이미 comments && !comments.length 조건문에서 return을 하고 있으니 else문은 사용하지 않으셔도 됩니다.
Suggested change
| if (comments && !comments.length) { | |
| return ( | |
| <EmptyState text={`아직 댓글이 없어요,\n지금 댓글을 달아 보세요!`} /> | |
| ); | |
| } else { | |
| return ( | |
| <ThreadContainer> | |
| {comments.map((item) => ( | |
| <CommentItem item={item} key={`comment-${item.id}`} /> | |
| ))} | |
| </ThreadContainer> | |
| ); | |
| } | |
| }; | |
| if (comments && !comments.length) { | |
| return ( | |
| <EmptyState text={`아직 댓글이 없어요,\n지금 댓글을 달아 보세요!`} /> | |
| ); | |
| } | |
| return ( | |
| <ThreadContainer> | |
| {comments.map((item) => ( | |
| <CommentItem item={item} key={`comment-${item.id}`} /> | |
| ))} | |
| </ThreadContainer> | |
| ); | |
| }; |
Comment on lines
+19
to
+22
| const [comments, setComments] = useState<Comment[]>([]); | ||
| const [isLoading, setIsLoading] = useState(false); | ||
| const [error, setError] = useState<string | null>(null); | ||
|
|
There was a problem hiding this comment.
P3:
data, isLoading, error와 같은 state들이 있고 이에 따른 로직들이 반복되니 custom hook으로 분리하시면 더 좋을 것 같아요~
| id="image-upload" | ||
| type="file" | ||
| onChange={handleImageChange} | ||
| accept="image/*" |
There was a problem hiding this comment.
P3:
file의 accept 속성은 user에게 적힌 확장자를 제안할뿐 제한하는 것은 아닙니다.
특정 확장자만 받고 싶다면 handleImageChange함수에서 해당 file의 확장자를 확인하신 후 이에 따른 로직을 입력해주셔야 합니다.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게