코드 컨벤션

1. Components 이름은 Pascal case를 사용합니다.

• Good : function Button = ...

• Bad : function button = ...

2. 변수 및 함수명에 줄임말 사용은 최대한 지양합니다.

• Good: getValue(), addString()

• Bad: getVal(), addStr()

3. Component는 함수 표현식 + 화살표 함수로 작성합니다.

• Good: const Button = () => {}

• Bad: functon Button(), const Button = function(){}

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

import ...

interface ...

const component = ({}) => {
}

const styledSome = styled.div``

export ...

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

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

• styled-component로 최대한 처리

6. prop에 명시하는 이벤트는 on~, 핸들러 함수를 정의할 때 는 handle 접두사를 사용하고 이벤트의 이름을 사용합니다.

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

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

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

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

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

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

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

9. 문자열, 숫자는 항상 상수로 사용합니다.

const ID_INPUT = 'ID'
const PASSWORD_INPUT = 'password'

const Form = () => {
	return (
		<input name={ID_INPUT} placeholder={ID_INPUT}>
		<input name={PASSWORD_INPUT} placeholder={PASSWORD_INPUT}>
	)
}

10. 상수명 컨벤션

11. 컴포넌트 props의 interface 명은 Props로 합니다

• Good: interface Props {}

• Bad: interface InputProps{}