[김승석] Sprint8 #287
[김승석] Sprint8 #287
Conversation
| name: ItemInputQuery; | ||
| className: string; | ||
| //value: string | File; | ||
| value: any; |
There was a problem hiding this comment.
아래 주석처럼 쓰고싶었지만, File과 string을 구분하는 곳에 오류를 해결하는 방법을 못찾았습니다.
There was a problem hiding this comment.
보시면 value의 타입에러가 발생하지만 타입가드 함수는 type === "textarea" 와 같이 type을 사용하죠?
이런 방식으로 value의 타입이 추론되게끔 하려면 인터페이스를 다시 구성해야합니다
import { ItemInputQuery } from "./Query";
type ItemInputValue = FileTypeValue | TextareaTypeValue;
type FileTypeValue = {
labelName: string;
type: "file";
id: string;
name: ItemInputQuery;
className: string;
value: File;
//onChange: () => void;
onChange: any;
placeholder?: string;
};
type TextareaTypeValue = {
labelName: string;
type: "textarea";
id: string;
name: ItemInputQuery;
className: string;
value: string;
//onChange: () => void;
onChange: any;
placeholder?: string;
};
export default ItemInputValue;이렇게 union타입을 활용하는것 처럼요
추가로 설명드리자면 이미지처럼 type이 textarea 나 file처럼 특정한 string을 가지고 있는 타입이라면
단순 string타입으로 퉁치는 것 보다
type type = 'textarea' | 'file'이렇게 union타입을 활용하는걸 추천드립니다. 내가 타입을 좁힐수록 추론은 더욱 잘 됩니다.
| //value: string | File; | ||
| value: any; | ||
| //onChange: () => void; | ||
| onChange: any; |
There was a problem hiding this comment.
이 부분도 위와 비슷한데 해결방법을 모르겠습니다.
There was a problem hiding this comment.
위 처럼 하면 이 부분에서도 에러가 발생하지 않을거에요 ㅎ
| return ( | ||
| <li key={el.id}> | ||
| <div className="comment_menu"> | ||
| <button type="button" className="btn_reset" data-menu="button" onClick={() => handleCommentMenu(el.id as any)}> |
There was a problem hiding this comment.
해당 버튼은 메뉴가 숨겨져있는 토글버튼인데,
아래 주석이 타입스크립트도 오류가 없고 깔끔해서 맞는거같은데 이상하게 토글버튼이 작동을 안합니다.
타입스크립트와 큰 관련이 없는거같은데 String이 이 아닌 as any 를 사용하면 작동을 합니다.
이유가 뭘까요??
There was a problem hiding this comment.
Props 타입은 id라는 key값을 가진 객체입니다
const handleCommentMenu = (id: Props) => {
setCommentMenu((prev) => (prev === id ? null : id));
};이 함수부터가 잘못된거같은데요? 함수에서는 id파라미터를 마치 string타입처럼 사용하고있잖아요
const [commentMenu, setCommentMenu] = useState<Props | null>(null);상태의 사용도 마찬가지구요 이건 다시한번 체크해보셔야할것 같네요
| } | ||
|
|
||
| const DetailBtm = ({ id }: Props) => { | ||
| const [commentMenu, setCommentMenu] = useState<Props | null>(null); |
There was a problem hiding this comment.
const [commentMenu, setCommentMenu] = useState<string | null>(null);이렇게 바꿔야하지 않을까요? 확신할 순 없는데
아래에서 해당 상태를 사용하는걸 보면 id값과 비교하는데 사용하네요
|
|
||
| const DetailTop = ({ id }) => { | ||
| const { data, loading, error } = useApi(`${id}`); | ||
| interface ProductDetail extends Product { |
|
|
||
| const useApi = (url) => { | ||
| const [data, setData] = useState(null); | ||
| const useApi = <T,>(url: string) => { | ||
| const [data, setData] = useState<T | null>(null); | ||
|
|
||
| const [loading, setLoading] = useState(true); | ||
| const [error, setError] = useState(null); | ||
| const [error, setError] = useState<AxiosError | null>(null); | ||
| useEffect(() => { | ||
| const fetchProduct = async () => { | ||
| try { | ||
| const response = await api.get(url); | ||
| const response = await api.get<T>(url); | ||
| setData(response.data); | ||
| } catch (error) { | ||
| setError(error); | ||
| setError(error as AxiosError); | ||
| } finally { | ||
| setLoading(false); | ||
| } |
2 participants
요구사항
기본
심화
멘토에게