코드 컨벤션

1. 네이밍 규칙

1-1. 함수 컴포넌트를 포함하여 모든 함수는 화살표 함수로 작성한다.

1-2. image, svg 는 kebab-case 를 사용하여 네이밍한다.

1-3. 변수명은 camelCase로 작성한다.

1-4. 컴포넌트 이름은 대문자로 시작하고, Pascal case를 사용한다.

- Good : `function Button = ...`
- Bad : `function button = ...`

1-5. 변수 및 함수명에 줄임말은 가독성을 해치지 않는 선에서 사용한다.

• button: btn

• Good: getValue(), addString()

• Bad: getVal(), addStr()

1-6. Boolean은 동사 + 명사로 사용한다

isBoolean
canGo
hasNumber

1-7. 문자열, 숫자는 항상 상수로 사용한다.

1-8. 핸들러 함수를 정의할 때 는 handle 접두사를 사용하고 이벤트의 이름을 사용합니다.

• Good: <StyledButton onClick={handleClick} />

• Bad: <StyledButton onClick={somethingElse} />

2. 스타일 및 디렉토리 구조

2-1. 각 파일은 Import / Interface(type) / main / styled / export 순으로 작성합니다.

• style이 길어지면 파일로 분리하기 (Component.style.tsx)

• Styled-component의 이름은 대문자로 작성한다

import ...

interface ...

const component = ({}) => {
}

const StyledSome = styled.div``

export ...

2-2. styled component에 인라인 스타일을 넣는 것은 최대한 지양합니다.

• Bad : <StyledButton style={{...}}>

• styled-component로 최대한 처리

2-3. 컴포넌트 props의 interface 명은 Props로 합니다

• Good: interface InputProps{}

• Bad: interface IInput {}

2-4. index.ts로 내보낸다

2-5. 동일한 이벤트를 다루는 핸들러가 여러개 존재 할 경우 정확히 어떤 컴포넌트에 할당되는 이벤트인지 명시해서 구분합니다. (handle + 컴포넌트 + 이벤트)

const handleButtonClick=()=>{}
const handleTimeBoxClick=()=>{}

return (
	<>
		<TimeBox onClick={handleTimeBoxClick} />
		<Button onClick={handleButtonClick} />
	</>
)

2-6. 변수 선언영역, 함수 사이, return 영역들 사이에 empty line으로 구분합니다.

const Form = () => {
	cosnt [state, setState] = useState({})
	const ...
//empty line...
	const handleChange = () => {
	}
//empty line...
	const handleSubmit = () => {
	}
//empty line...
	return (<></>)
}

2-7. S-dot 네이밍: 스타일 컴포넌트를 분리할때 S로 요약하여 구분

import * as S from ./styles.js;

2-8. 컴포넌트 export