Conversation
|
AddItem 페이지의 컴포넌트를 ItemDetails(아이템 정보), ItemImageUpload(이미지 등록 및 삭제 기능), ItemTags(태그 추가 및 삭제 기능)로 분리해봤습니다. 관심사의 분리가 잘 이루어진 건지 모르겠습니다. 제 생각에는 잘 분리되었다고 생각합니다. 유저입장에서 보면 이미지를 업로드하는 기능과 그 외의 텍스트 입력 기능을 따로 볼 수 있고 |
코드가 길어지면 컴포넌트로 만들어서 따로 관리하기도 합니다. 그럴때는 연관된 핸들러 및 상태들을 함께 컴포넌트 내부로 옮기는 시도를 합니다. const handleDetailsChange = (e) => {
const { name, value } = e.target;
setItemDetails((prevDetails) => ({
...prevDetails,
[name]: value,
}));
};
const handleTagsChange = (newTags) => {
setItemDetails((prevDetails) => ({
...prevDetails,
itemTags: newTags,
}));
};위 두 코드는 아이템 디테일 컴포넌트에 props로 넘겨주고 있죠? 이 두 함수는 공통적으로 |
프롭 리프팅이 프롭스를 부모컴포넌트로 옮기는 것을 말씀하시나요? |
저는 후자처럼 items.css, addItems.css로 분리하여 관리하는게 낫다고 생각합니다. 개발을 할때 항상 집중 할 곳을 명확하게 찾을 수 있어야하고, 불필요하게 관련없는 코드를 볼 필요없어야합니다. |
공식 문서를 보니 Lifting State Up이 맞는 표현 같습니다! 용어를 잘못 알고 있던 부분이었습니다. |
| type="file" | ||
| id="ImgUpload" | ||
| name="ImgUpload" | ||
| accept="image/*" |
There was a problem hiding this comment.
이미지만 받을 수 있도록 accept 속성을 적어주셨네요 !
| const handleDetailsChange = (e) => { | ||
| const { name, value } = e.target; | ||
| setItemDetails((prevDetails) => ({ | ||
| ...prevDetails, | ||
| [name]: value, | ||
| })); | ||
| }; | ||
|
|
||
| const handleTagsChange = (newTags) => { | ||
| setItemDetails((prevDetails) => ({ | ||
| ...prevDetails, | ||
| itemTags: newTags, | ||
| })); | ||
| }; |
There was a problem hiding this comment.
질문주신것과 같이 이 부분은 itemDetails로 옮기는게 좀 더 응집도가 있을 수 있습니다 ^^
| return ( | ||
| <section className="item-details"> | ||
| <div className="item-detail-container"> | ||
| <label className="section-title">상품명</label> |
There was a problem hiding this comment.
| <label className="section-title">상품명</label> | |
| <label htmlFor={아이디를 적어주세요} className="section-title">상품명</label> |
| </div> | ||
|
|
||
| <div className="item-detail-container"> | ||
| <label className="section-title">상품 소개</label> |
There was a problem hiding this comment.
label과 연관있는 요소의 아이디를 작성해주세요.
| <label className="section-title">상품 소개</label> | |
| <label htmlFor="itemDescription" className="section-title">상품 소개</label> |
| const handleAddTag = (e) => { | ||
| if (e.key === "Enter" && tagInput.trim()) { | ||
| e.preventDefault(); | ||
| onTagsChange([...tags, tagInput.trim()]); |
There was a problem hiding this comment.
불변성을 지키면서 새로운 원소를 추가하신 점 잘 하셨습니다 !
| }; | ||
|
|
||
| const handleRemoveTag = (index) => { | ||
| onTagsChange(tags.filter((element, i) => i !== index)); |
There was a problem hiding this comment.
지금은 문제없이 작동할테지만 인덱스보다는 element로 필터링을 하는게 좀 더 안전할 것 같다는 생각이 들어요.
이런 경우를 위해서 상태관리 라이브러리를 많이 사용합니다. 추후에 배우실 예정이고 Zustand라는 상태관리 라이브러리를 많이 쓰는 추세더라구요. |
요구사항
기본
심화
변경사항
스크린샷
멘토에게
AddItem 페이지의 컴포넌트를 ItemDetails(아이템 정보), ItemImageUpload(이미지 등록 및 삭제 기능), ItemTags(태그 추가 및 삭제 기능)로 분리해봤습니다. 관심사의 분리가 잘 이루어진 건지 모르겠습니다.
ItemDetails(아이템 정보 입력) 컴포넌트는 특별한 기능은 없지만 코드 길이가 길어지는 것 때문에 분리했는데, 불필요하게 분리한 걸까요? 단순히 코드가 길어지는 것 때문에 컴포넌트를 분리하기도 하나요?
컴포넌트를 나누다보니 프롭 리프팅을 자주 사용하게 되는 것 같습니다. 프롭 드릴링 문제를 예방하려면, 프롭 리프팅은 어느정도 사용하는 게 적절할까요? 가이드 라인이 있는지 궁금합니다!
mediaquery.css 파일 안에 Items 페이지의 미디어쿼리 디자인, AddItem 페이지의 미디어쿼리 디자인이 함께 적용되어 있는데 다른 방식으로 분리하는 것이 나을까요? mediaquery.css를 삭제한 후 Items.css 파일과 AddItem.css 파일에 분리해서 미디어쿼리를 적용하는 방식이 더 나을지 모르겠습니다.
pages 폴더 안에 각 페이지에 해당하는 CSS 파일을 만들었습니다. 이후 각 페이지에 맞는 CSS 파일만을 import해서 사용하려는데, CSS 파일이 의도대로 적용되지 않습니다. 가령 AddItem.jsx에 AddItem.css를 import했고, 상위 컴포넌트에는 global.css만 import했는데 관련 없는 Items.css가 적용되는 문제가 있습니다.