[차경훈] sprint8 #174
[차경훈] sprint8 #174
Conversation
dongqui
left a comment
dongqui
left a comment
There was a problem hiding this comment.
경훈님 요즘 정말 열심히 달리시는군요!! 👍 👍
타입스크립트로 잘 넘어가고 계신 거 같습니다 :)
제네릭, 유틸 타입 같은 것들도 적극 사용해 보시면 더욱 좋을 거 같습니다~!
| type: "email" | "text" | "password"; | ||
| placeholder: string; | ||
| value: string; | ||
| onChange: (e: ChangeEvent<HTMLInputElement>) => void; |
There was a problem hiding this comment.
onChange: ChangeEventHandler<HTMLInputElement>;이렇게 쓰실 수 있어요!
| placeholder: string; | ||
| value: string; | ||
| onChange: (e: ChangeEvent<HTMLInputElement>) => void; | ||
| onBlur?: (e: FocusEvent<HTMLInputElement>) => void; // onBlur는 선택적 |
There was a problem hiding this comment.
위와 마찬가지 입니다!
onBlur?: FocusEventHandler<HTMLInputElement>;| onToggleShowPassword?: () => void; // 토글 함수 | ||
| } | ||
|
|
||
| const AuthFormField: React.FC<AuthFormFieldProps> = ({ |
There was a problem hiding this comment.
크게 상관은 없는데..
암시적인 children 포함, 제네릭 활용 어려움 등의 이유로 FC 타입은 지양되는 분위기가 있습니다. 실제로 CRA에서는 제거 되기도 했죠. 참고만 해주세요 :)
| @@ -0,0 +1,70 @@ | |||
| import React, { ChangeEvent, FocusEvent } from "react"; | |||
|
|
|||
| interface AuthFormFieldProps { | |||
There was a problem hiding this comment.
html 기본 속성의 경우 아래처럼 표현할 수 있습니다.
interface AuthFormFieldProps extends InputHTMLAttributes<HTMLInputElement> {
error?: string;
//... html 속성 제외 커스텀 프랍들
}| import { Link as RouterLink } from "react-router-dom"; | ||
|
|
||
| // HomePage.tsx, SigninPage.tsx, SignupPage.tsx 에서 사용된 Link 타입 문제 임시 해결 | ||
| const Link: any = RouterLink; |
There was a problem hiding this comment.
as RouterLink만 지워도 타입 문제는 딱히 없지 않나요!? 🤔
import { Link } from "react-router-dom";| import { useState, ChangeEvent, FormEvent, FocusEvent } from "react"; | ||
| import { useNavigate } from "react-router-dom"; | ||
|
|
||
| export const useSignupForm = () => { |
There was a problem hiding this comment.
상태 값이 상당히 늘어나는데, react-hook-form 그리고 타입스크립트도 시작하셨으니 zod를 함께 써보시면 좋습니다!!
| import { formatTimeAgo } from "../utils/timeFormat"; // 경로가 정확한지 확인 필요 | ||
|
|
||
| function useComments(productId) { | ||
| const [comments, setComments] = useState([]); |
There was a problem hiding this comment.
아직 타입 적용이 안 됐군요! 복잡한 객체의 상태를 정의할 때 제네릭을 쓰시면 좋습니다 :)
| // 서버 응답에서 업데이트된 isFavorite와 favoriteCount를 받아 상태를 갱신합니다. | ||
| // API 응답이 전체 product 객체를 반환한다면 setProduct(data)를 사용할 수 있습니다. | ||
| // 그렇지 않다면, 부분적으로 상태를 업데이트해야 합니다. | ||
| setProduct((prevProduct) => ({ |
There was a problem hiding this comment.
좋아요 버튼의 경우 낙관적 UI를 많이 씁니다 :)
| fetchComments(); | ||
| } | ||
| }, [loading, product, fetchComments]); | ||
| const { product, loadingProduct, productError, handleFavoriteClick } = |
2 participants
요구사항
기본
심화
주요 변경사항
멘토에게