프로젝트 개인 목표

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

• Good : function Button = ...

• Bad : function button = ...

2. Component 확장자는 JSX를 사용합니다.

• Good: Button.jsx

• Bad: Button.js

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

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

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

4. props는 각 태그의 고유 기능을 잃지 않게 항상 할당해 줍니다.

• Good:

const Button = ({...props}) => {
//생략
return <StyledButton {...props} />
}

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

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

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} />
</>