clsx
tailwind로 작성한 style을 콤마로 묶을 수 있게 해주는 라이브러리
공통화 => 😈 Anti-HardCoding !!
예시. navigation바에 Link태그를 엮어야 하는데 일일히 모든 경로를 다 설정하기보다는 하나의 라우팅 파일을 만들어서
[ LOGIN:{to:"/login", label:"login"}, ]이런 방식으로 관리하면 하드코딩을 줄일 수 있다.
오타 등에 의해서 원한 로직과 반대로 실행되는 경우도 있으니,
Constant화를 잘 하자. 하드코딩 XX
예시. Authform의 mode를 'login'이 아닌 'logi'로 넣으면 Authform 내에 mode구분에서 login이 아닌 signup으로 자동 우회되는 상황 !!
예시. icon 크기도 상수화를 하면 유연성이 생긴다.
디자인 시스템
웹이나 서비스 디자인에 적용된 디자인 스타일의 규칙이나 가이드라인을 말한다.
프로젝트에 적용해 보기.
[사용 방법]
ref. HeroUI
NextUI가 바뀐 버전.
button props를 다 허용하게끔 만들어 보고, 직접 구현해보는 게 가장 좋은 연습 방법.
시맨틱 태그
- Spacer : 간격을 두고 싶을 때, 코드 상에서 직관적으로 보일 수 있도록 시맨틱 태그를 활용할 수 있다.
선언은 이런 식으로 할 수 있다. y가 아닌 x로도 custom할 수 있다.
utils 분리
유틸성의 함수들은 컴포넌트 안보다는 따로 분리된 구조가 좋다.
zustand 전역상태 구독하기
const {isLogin} = useAuthStore(store=>store)
토어의 전체 상태 객체를 반환.
구조 분해 할당 {isLogin}을 통해 전체 상태 중 isLogin 속성만 추출한다.
전체를 구독하기 때문에 스토어 내의 어떤 상태가 변경되든(예: isLogin 외의 다른 상태가 변경되어도) 이 훅을 사용하는 컴포넌트는 리렌더링된다!
불필요한 렌더링을 유발하여 성능을 저해할 수 있음.
const isLogin = useAuthStore(store=>store.isLogin)
선택적 구독, 전체 스토어 중 isLogin 속성만 구독한다.
isLogin 값이 변경될 때만 컴포넌트가 리렌더링되고, 스토어의 다른 상태가 변경되어도 이 컴포넌트는 영향을 받지 않는다.
렌더링 최적화에 좋은 코드.
tanstack - mutate? mutateAsync?
습관적으로 mutate를 사용하지 말고, 동기 함수를 사용해야 하는지, 비동기 함수를 사용해야 하는지를 의식하고 사용하기!
- mutate는 데이터 변경을 위한 동기적 함수로, 호출 시 Promise를 반환하지 않는다!
- mutateAsync는 동일한 기능을 하지만 Promise를 반환하여 then/catch로 체이닝하거나 async/await으로 처리할 수 있음!
