코드 스타일링 (Lint에게 맡겨달라구)

• 탭 간격 2

• 작은 따옴표 사용

• import 순서 및 그룹화

  // 임포트 순서 예시
  import React from 'react'; // 외부 라이브러리
  import { useQuery } from 'react-query'; // 외부 라이브러리
  
  import { Button } from '@/components/common'; // 내부 컴포넌트
  import { getUserInfo } from '@/apis/user'; // 내부 모듈
  
  import './Button.style.css'; // CSS
  

네이밍 컨벤션

컴포넌트

• 컴포넌트 파일명, 함수명은 PascalCase를 사용한다.

  // ItemComponent.tsx
  const ItemComponent = () => {}
  

일반 함수

기능 + target + action (ex. handle + button + click ⇒ handleButtonClick())

• 줄임말을 쓰지 않는다.
• API의 경우에는 관련 메소드로 시작한다. (ex. getUserInfo())
• hook의 경우에는 use- 로 시작한다   . (ex. useGetUserInfo())
• 전역상태의 경우에는 -store 로 끝낸다. (ex. userDataStore, setUserDataStore)

상수

상수는 UPPER_SNAKE_CASE를 사용하며, assets/static 폴더에서 관리를 권장

기타 코딩 컨벤션

함수의 위치

컴포넌트 내 작성 순서는 다음을 따른다.

// 1. import문
import React from 'react';

// 2. 컴포넌트 props type
interface ComponentProps { ... };

// 3. 정적인 데이터
const dummyData = [];

// 4. Main 함수 선언
const Component: React.FC<ComponentProps> = ({ ... }) => {
	// 5. 함수 내에서 사용되는 변수,상태,ref
	const [data, setData] = useState();
	
	// 6. hooks
	const { queryData, refetch } = useGetQueryData();
	
	// 7. useEffect
	useEffect(() => { ... }, []);
	
	// 8. 함수
	const someFunction = () => { ... };
	
	// 9. 이벤트 핸들러
	const handleSubmit = () => { ... };
	
	// 10. return
	return (
		...
	);
}

주석