코드 컨벤션

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. 문자열, 숫자는 항상 상수로 사용합니다.

속성_특징 , TEXT = "text" 너무 당연한건 상수화 안해	
const NAME_ID = 'id'
const NAME_PASSWORD = 'password' 

const PLACEHOLDER_PASSWORD = '비밀번호 입력'
const PLACEHOLDER_ID = '이메일 입력'

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

10. jsx: map 돌면서 렌더링 시 return 없이

배열.map((element) => element})

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

• Good: interface Props {}

• Bad: interface InputProps{}

<Button width={100}/>

interface Props {
	width: number
}

const Input = ({width}:Props)=>{

 return <Input width={100}/> 

}
const Input = styled.input`
	width: ${({width}) => `${width}rem`}
`

11. 복수형 변수명은 list로

• Good: menuList

• Bad: