이벤트 함수
// event 사용하지 않는 경우
const onClick = (id) => () => {
console.log(id)
}
// event 사용하는 경우
const onChange = (e) => {
setContent(e.target.value);
}
return <button onClick={onClick(id)}/>
return <button onChange={onChange}/>
function 함수
//함수 -> utils, libs, hooks 함수들 -> 카멜케이스
export function 함수명
// 페이지, 컴포넌트 -> 파스칼케이스
export function 컴포넌트
consts(상수)
const QUERY_KEY = {
MAIN : {
DEFAULT: 'main'
},
...
}
호출 함수
페이지 폴더 명
스타일 / UI 관련 파일
타입스크립트
type만 사용
prop 타입
type Props = {
}
// 다른 컴포넌트에서의 타입을 추출 할 경우
type Props = {
todoList: ComponentProps<typeof UserList>[]
}
children이 있는 경우 PropsWithChildren<T>을 사용한다.
export default function 컴포넌트() {
}
props 모두 넘겨주기
// 💩 Bad
<TodoList username={username} userage={userage} user1={user1} />
// 🎇 Good
<TodoList username={username} />
<TodoList user={user} />
use client를 사용하는 곳이라면 분리하기, 웬만하면 서버에서 렌더링 하게하기
use client 사용 🙅🏻reactQuery같은 것들. 전부 libs 폴더로 분리
_libs
export const getUser: QueryFunction<User, [_1: string, _2: string]> =
async ({ queryKey }) => {
const [_1, username] = queryKey;
const res = await fetch(`http://localhost:9090/api/users/${ username }`, {
next: {
tags: ['posts', 'recommends']
},
credentials:'include',
cache: 'no-store'
})
if (!res.ok) {
throw new Error("Failed to fetch data")
}
return res.json()
}
export function useGetUser(username) {
return useQuery<User, Object, User, [_1: string, _2: string]>({
queryKey: ['users', username],
queryFn: getUser,
staleTime: 60 * 1000,
gcTime: 300 * 1000,
});
}
// 컴포넌트에서 사용 예시
export default Page () {
const { data: user, error } = useGetUser(username)
}