코드 컨벤션

[ljw0096]

RootTeam 컨벤션

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

해당 부분에 대해 수정 보완이 필요한 부분에 대해서 남겨주세요!

추가로 LayOut에 대해 정하고 싶은데요, 현재 Area, Section, Container, Wrapper등

각자 마음에 드는 방식대로 명명해서 사용하고 있는데, 이 부분은 논의 후에 통일해야 할 것 같습니다.

[dahye1013]

wow 완전 깔끔하게 정리해주셨네요!!! 👍
이 기준으로 리팩토링하면서 구현 진행하면 좋을 것 같아요~!

[codeisneverodd]

크 완벽한 정리 확인했습니다!