코드 컨벤션

• 컴포넌트 폴더, 파일명은 파스칼 케이스로 작성한다.

• 나머지 폴더명은 카멜 케이스로 작성한다.

• 컴포넌트 props 타입 선언 시 <컴포넌트명>Props 와 같은 형태로 파스칼 케이스를 지켜서 작성한다.

  • export interface ButtonProps {}

• 도메인 관련 타입 선언 시 <도메인> 과 같은 형태로 파스칼 케이스를 작성한다.

  • export interface Bookmark {}
  • 모노레포지만.. 백엔드 인터페이스 기다릴 수 없다! 각자 만들고 리팩터링 때 합치자!

• 스타일 관련 코드는 .css.ts 파일에서 전체 import를 하고 styles prefix를 붙여서 사용한다.

  • 스타일 관련 타입은 해당 스타일을 사용하는 tsx 파일에서 <*>Type으로 선언한다.

  import { ReactNode } from "react";
  
  import classnames from "../../../utils/classnames";
  
  import * as styles from "./Badge.css";
  
  **export type BadgeVariantType = keyof typeof styles.badgeVariants;**
  
  export interface BadgeProps {
    variant: BadgeVariantType;
    label: ReactNode;
  }
  
  export function Badge({ variant, label }: BadgeProps) {
    const badgeStyle = classnames(
      styles.badgeBaseStyle,
      styles.badgeVariants[variant],
    );
    return <span className={badgeStyle}>{label}</span>;
  }
  

• Early Return 패턴을 사용한다.

• 이벤트 핸들러 props에는 on 접두사를 붙이고, 값으로 넘길 때에는 handle 접두사를 붙인다.

function Form({ onSubmit }) {

	const handleSubmit = () => {
		onSubmit();
	};
	
	return (<form>
		<button type="submit" onClick={handleSubmit}></button>
	</form>);
}

function List({ data, onClick }) {
	const genClickHandler = (id) => () => onClick(id);
	
	return (<ul>
		{data.map((id) => <li onClick={genClickHandler(id)}></li>)}
	</ul>);
}

• 함수명은 동사뒤에 명사가 오도록 조합하고 카멜 케이스로 작성한다..
• 조건 관련 변수에는 is를 붙이지 않는다.
  • ex. isChecked ❌ checked 🙆🏻‍♀️

컴포넌트 리스트

Common

• Button

  

• Badge

  

• Toast