Conversation
…ithub-actions [Fix] delete merged branch github action
| border: 1px solid var(--Linkbrary-primary-color, #6d6afe); | ||
| background: var(--Linkbrary-white, #fff); | ||
| color: var(--Linkbrary-gray60, #9fa6b2); |
There was a problem hiding this comment.
css 변수로 작성된 부분도 테마를 이용한 방법으로 개선해 보시면 어떨까요?
| }; | ||
|
|
||
| const CategoryBtn = ({ folderId, currentFolderId, setFolderId, setSelectedCategory, children }) => { | ||
| const [isSeleted, setIsSelected] = useState(false); |
There was a problem hiding this comment.
버튼의 선택된 여부를 상위 컴포넌트에서 관리하고, 해당 상태를 자식 컴포넌트에 props로 전달하는 것이 좋습니다.
자식 컴포넌트 내에서 선택 상태를 관리하면, 여러 버튼이 동시에 선택될 수 있는 문제가 발생할 수 있기 때문입니다.
상태 관리는 상위 컴포넌트에서 집중적으로 이루어지고, 자식 컴포넌트에는 해당 상태를 전달하는 것이 좋습니다.
| const [folderData] = useGetFolder(); | ||
| const [folderList] = useGetFolderList(); | ||
| const [linkList] = useGetLinks(1, folderId); | ||
| const [selectedCategory, setSelectedCategory] = useState(folderList[0].name); |
There was a problem hiding this comment.
해당 상태가 관리되어야할 이유가 보이지 않습니다.
아래와 같이 상태가 관리 되는 folderList와 folderId를 이용해 값만 추출하시는게 좋은 방향으로 보여집니다.
const selectedCategory = folderList.find((folder) => folder.id === folderId).name ?? folderList[0].name
| const CategoryBtn = ({ folderId, currentFolderId, setFolderId, setSelectedCategory, children }) => { | ||
| const [isSeleted, setIsSelected] = useState(false); | ||
|
|
||
| useChangeFolderColor(currentFolderId, folderId, setIsSelected); |
There was a problem hiding this comment.
해당 커스텀 훅은 상태를 부모 요소로 끌어올리게 되면 더이상 필요가 없어질 것으로 보여집니다.
There was a problem hiding this comment.
해당 커스텀 훅은 유틸리티 함수로 작성하는 것이 더 적절할 것 같습니다.
훅은 리액트의 생명주기와 밀접하게 연관되어 있으며, 상태 관리와 같은 특정 기능을 수행하기 위해 나왔습니다.
반면, 유틸리티 함수는 범용적인 로직을 캡슐화하기 위해 사용되므로, 해당 기능이 리액트 컴포넌트의 생명주기와 직접적인 연관이 없다면 유틸리티 함수로 작성하는 것이 더 바람직한 방향일것 같습니다.
There was a problem hiding this comment.
useFormattingDate.jsx 파일의 리뷰를 참고해주세요.
|
이번에도 고생하셨습니다! |
요구사항
기본
멘토에게