[이유진] sprint6 #137
[이유진] sprint6 #137
Conversation
dongqui
left a comment
dongqui
left a comment
There was a problem hiding this comment.
유진님!
빠른 성장이 느껴집니다..🤣 프로젝트도 화이팅입니다~!
|
|
||
| if (value) { | ||
| setError("*이미지 등록은 최대 1개까지 가능합니다."); | ||
| if (fileInputRef.current) fileInputRef.current.value = ""; |
| color: var(--color-gray400); | ||
| font-size: var(--text-lg); | ||
|
|
||
| input { |
There was a problem hiding this comment.
hidden 속성을 쓰는 방법도 있습니다 :)
<input hidden />| if ((e.key === "Enter" || e.key === ",") && inputValue.trim()) { | ||
| e.preventDefault(); | ||
| const newTag = inputValue.trim(); | ||
| if (!tags.includes(newTag)) { |
There was a problem hiding this comment.
중복 처리하실 때 Set을 서보셔도 좋아요 :)
| onClick={onSearch} | ||
| ></button> | ||
| )} | ||
| {type === "textarea" ? ( |
There was a problem hiding this comment.
type은 input이 가지고 있는 고유 html 속성이죠..! 커스텀하여 props로 쓰기에는 부적절합니다.
function A({ as }) {
const Component = as;
return <Component />
}
<A as='textarea' />
이런 식으로 쓰실 수 있어요!| </label> | ||
| )} | ||
| <div className="el-input"> | ||
| {type === "search" && ( |
There was a problem hiding this comment.
이것도 방법이 될 수 있지만 검색, 비밀번호 표시 같은 요소들은 밖에서 처리하시는 것이 좋습니다 :)
지금 상태라면 type이 늘어날 때 마다 분기처리나 onSearch 같은 코드들이 계속 추가됩니다! 컴포넌트가 너무 커지고, 사용하기 복잡해지는 문제가 생길 수 있습니다.
<TextFiled
prefix={
<button
type="submit"
className="el-btn btn-search"
aria-label="검색"
onClick={onSearch}
></button>
}
/>이런식으로 밖에서 받아서 처리하시는 방법도 있어요!
| const [searchParams, setSearchParams] = useSearchParams(); | ||
| const navigate = useNavigate(); | ||
|
|
||
| const searchQuery = searchParams.get("search") || ""; |
| const params = { search: searchQuery, order, page, pageSize: itemCount }; | ||
| const { items, isLoading, error } = useItemFetcher(getItems, params); | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
이부분은 없어도 동작하는데 문제 없을 거 같네요 🤔
또한 onChange를 세밀하게 다룰 것이 아니라면 unControlled를 고려해 보셔도 좋습니다 :) form으로 이미 감싸셔서 submit event에 value가 들어올 거에요!
| import TagInput from "../../components/Input/TageInput/TagInput"; | ||
| import "./AddItem.scss"; | ||
|
|
||
| function AddItem() { |
| useEffect(() => { | ||
| handleGetItmes(); | ||
| }, [search, order, page, itemCount]); | ||
| if (error) { |
There was a problem hiding this comment.
Errorboundary를 사용하시면 컴포넌트 내에서 에러 관련 로직을 빼낼 수 있습니다 :)
https://fe-developers.kakaoent.com/2022/221110-error-boundary/
2 participants
요구사항
Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
피그마 디자인에 맞게 페이지를 만들어 주세요.
React를 사용합니다
기본
심화
주요 변경사항
스크린샷
멘토에게