[배진한] Sprint9 #125
[배진한] Sprint9 #125
Conversation
Jin-coding-333
added
매운맛🔥
| const articleId = router.query.id; | ||
|
|
||
| const { article, isLoading, hasError } = useArticleId(articleId) || []; | ||
| const { comments, handleDeleteComment, handlePostComment, setTextareaValue, textareaValue } = useComment(articleId) || []; |
There was a problem hiding this comment.
공통적으로 사용하는 로직들을 커스텀훅으로 만들어주신것 좋습니다!
그런데, 뒤에 || [] 는 의미가 없는 코드같아요!
| </button> | ||
| <button | ||
| onClick={(e) => { | ||
| if (article) { |
There was a problem hiding this comment.
패턴을 if/else로 구성하는게 더 나을것 같아요.
함수에서 return문이 여러개면 사이드이펙트를 유발하는 코드가 될 수 있습니다.
There was a problem hiding this comment.
아하 다시보니 article이 있느냐 없느냐로 post의 메뉴인지, comment의 메뉴인지 판단하시는군요!
이렇게하는것보다.
props로 받는 callback을 onClickEdit, onCilckDelet 로두고 밖에서 해당 콜백을 제어해주는게 좋은것 같아요.
현재 컴포넌트는 메뉴의 역활만 하면되니, 이게 코멘트의 메뉴인지 포스트의 메뉴인지 알 필요가 없을 것 같아요!
kimjong95
left a comment
kimjong95
left a comment
There was a problem hiding this comment.
전체적으로 Presentational-Container패턴을 통해 컴포넌트를 분리해주신 것 같아서 좋습니다.
공통적인 business로직은 customHook으로 제어하고, UI들은 패턴을 통해서 정리해주셨는데, 이전에 사용하신 방식과 무엇이 달랐고, 어떤점이 좋았는지, 어떤점이 불편했는지 알려주시면 좋을 것 같아요!
| </button> | ||
| <button | ||
| onClick={(e) => { | ||
| if (article) { |
There was a problem hiding this comment.
아하 다시보니 article이 있느냐 없느냐로 post의 메뉴인지, comment의 메뉴인지 판단하시는군요!
이렇게하는것보다.
props로 받는 callback을 onClickEdit, onCilckDelet 로두고 밖에서 해당 콜백을 제어해주는게 좋은것 같아요.
현재 컴포넌트는 메뉴의 역활만 하면되니, 이게 코멘트의 메뉴인지 포스트의 메뉴인지 알 필요가 없을 것 같아요!
| const [articles, setArticles] = useState([]); | ||
|
|
||
| useEffect(() => { | ||
| const fetchArticles = async () => { |
There was a problem hiding this comment.
작성하신 부분이 react-query를 사용하면 상태로서 관리되고, 이 훅을 여러곳에서 사용해도 fetch를 다시 안할 수 있어요!
사용하는 방법이 어렵다면 예제코드들을 포함해드릴 수 있을 것 같아요!
| } | ||
|
|
||
| return ( | ||
| <div className={styles.ArticleDetailBox}> |
There was a problem hiding this comment.
요기 내부가 이전에 공유드린 Presentational-Container패턴인것 같네요!! 잘 적용해주신것 같아서 좋습니다!
| function ArticlesList() { | ||
|
|
||
| const articlesList = useArticle(4, 'recent'); | ||
| const Articles = articlesList.article || []; |
|
|
||
| function ArticlesList() { | ||
|
|
||
| const articlesList = useArticle(4, 'recent'); |
There was a problem hiding this comment.
여기에 파라미터로 넘겨주는 값이 둘다 페이지네이션에 필요한 값 같네요?! 이런경우에 페이지네이션 객체를 만들어서 관리 하는게 좋을것 같아요!
2 participants
📋 위클리 미션 요구사항
기본 요구사항
공통
https://panda-market-api.vercel.app를 사용합니다. 명세는https://panda-market-api.vercel.app/docs를 확인해 주세요.로그인/회원가입 페이지
로그인 페이지
회원가입 페이지
로그인, 회원가입 페이지 공통
GNB
상품 상세 페이지
심화 요구사항
로그인 및 회원가입 페이지 공통
유저 기능
React-Query로 마이그레이션
로딩 및 에러 핸들링
상품 데이터 캐싱 및 업데이트
멘토에게