Team Ani

• 이벤트 함수

  • on - 붙이는 것

  // 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'
  	},
  	...
  }
  

• 호출 함수

  • fetch 사용

• 페이지 폴더 명

  • 소문자 + 케밥 케이스(케밥은 최소화)

• 스타일 / UI 관련 파일

  • css module ⇒ page.css.ts ⇒ page.module.css
  • TodoList ⇒ todo-list.css.ts
  • TodoList ⇒ TodoList.stories.tsx

• 타입스크립트

  1. type만 사용

  2. prop 타입

     type Props = {
     	
     }
     
     // 다른 컴포넌트에서의 타입을 추출 할 경우
     type Props = {
     	todoList: ComponentProps<typeof UserList>[]
     }
     

  3. children이 있는 경우 PropsWithChildren<T>을 사용한다.

     export default function 컴포넌트() {
     
     }
     

  4. props 모두 넘겨주기

     // 💩 Bad
     <TodoList username={username} userage={userage} user1={user1} />
     
     // 🎇 Good
     <TodoList username={username} />
     <TodoList user={user} />
     

• use client를 사용하는 곳이라면 분리하기, 웬만하면 서버에서 렌더링 하게하기

  • 페이지에서는 use client 사용 🙅🏻

• reactQuery같은 것들. 전부 libs 폴더로 분리

  • _libs
    • useQuery ⇒ useGetUser
    • use + fetch 함수 이름 으로 파일 생성 & 분리

  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)
  }