[조은주] 기능구현 챌린지 #3
Conversation
src/common/Header/index.tsx
Outdated
| <a className={cx("nav-items")} href="/bookmarks"> | ||
| 즐겨찾기 | ||
| </a> |
There was a problem hiding this comment.
a태그와 link태그 차이점이 있는데
Link 태그와 a 태그의 차이점을 검색해봤어요 !
이는 전체 페이지가 다시 로드되어 리액트 상태가 모두 초기화된다는 것을 말한다. 리액트를 사용할 때 a 태그를 사용하면 치명적인 가장 큰 이유가 된다. 반면 Link 태그는 클릭해도 새로고침되지 않는다.
참고해서 상황에 맞게 바꿔보시면 좋을 것 같습니다 ! 🙂
There was a problem hiding this comment.
좋은 정보 감사해요!! 상황별로 적절하게 사용해야 겠네요!!
| <div className={cx("modal-overlay")}> | ||
| <dialog open={isOpen} className={cx("modal-container")}> | ||
| <label>즐겨찾기에서 제거하시겠습니까?</label> | ||
| <menu className={cx("menu-container")}> |
src/common/Dropdown/DropdownItem.tsx
Outdated
|
|
||
| export default function DropdownItem({ searchValue, search }: DropdownItemProps) { | ||
| return ( | ||
| <div className={cx("recent-item")}> |
There was a problem hiding this comment.
classnames/bind의 경우 조건부 스타일을 줄 때 사용하는 거로 알고 있어서
조건부가 아닐 때 css를 import하시는 용도라면, css 파일에서 카멜케이스로 해서 아래와 같이 style을 가지고 사용하시는 것도 좋을 거 같아요!
import style from './index.module.scss';
<div className={style.recentItem}>
// ...
</div>
There was a problem hiding this comment.
아하,,, classnames/bind가 그냥 사용하는 것보다 조건부 스타일을 적용할 때 더 유용한 거군요! 다음부터는 잘 지켜서 사용해 봐야겠네요!! 감사합니다.
| children: ReactNode; | ||
| } | ||
|
|
||
| export default function SearchItemLayout({ children }: SearchItemLayoutProps) { |
There was a problem hiding this comment.
저도 최근에 알게 된 건데,
react에 children을 가진 props 타입이 있어서, ReactNode 대신 이걸 사용하면 코드가 좀 더 가독성 있게 바껴서 좋더라구여!
그래서 은주님도 한번 사용해보시면 좋을 거 같아요! 😁
import { PropsWithChildren } from 'react';
export default function SearchItemLayout({ children }: PropsWithChildren) {
// ...
}
만약 다른 타입들도 있는 props라면 아래와 같이 Generic으로도 사용할 수 있어요!
그러면 children과 구분되는 것 같기도 해서 저는 유용하게 사용하고 있어서 추천드립니당!
import { PropsWithChildren } from 'react';
interface IComponentProps {
name: string;
content: string;
}
export default function Component({ children }: PropsWithChildren<IComponentProps>) {
// ...
}
There was a problem hiding this comment.
안녕하세요. 경은님!
PropsWithChildren이라는 타입을 몰랐는데 이렇게 사용해도 유용할 것 같에요!! 좋은 정보 감사해요!!
그런데 PropsWithChildren에 대해 검색해 봤는데 이 타입의 경우 children이 옵셔널로 지정되어 있어 children이 존재하지 않더라도 에러가 발생하지 않는다고 해요!
이를 해결하기 위해 StrictPropsWithChildren 타입을 선언해 children이 꼭 필요한 경우 에러가 발생하도록 하는 것도 좋아 보여요!
import { ReactNode } from "react";
export type StrictPropsWithChildren<P = unknown> = P & {
children: ReactNode;
};이렇게 타입을 선언하면, children이 누락된 경우 에러가 발생하게 되어 코드의 안정성을 높일 수 있습니다. 좋은 정보 공유해 주셔서 감사합니다!
피드백 감사합니다! 😊
There was a problem hiding this comment.
오 StrictPropsWithChildren이 있었군요!
확실히 PropsWithChildren 보다는 안정성이 좋을 거 같아요!
좋은 정보 감사합니당! 😁
필수 구현 사항
https://clinicaltrialskorea.com/studies/{검색어ID}링크로 이동console.info("calling api")출력을 통해 콘솔창에서 API 호출 횟수 확인이 가능하도록 설정추가 구현 사항
선택 구현 사항
과제를 수행하면서 진행하셨던 고민
구현하고자 했던 설계의 방향성