1. 네이밍 컨벤션
폴더명 | • camelCase : 직접적으로 바로 react컴포넌트가 들어있지 않은 간접적인 관계의 폴더
• PascalCase : react 컴포넌트가 바로 들어 있는 폴더 |
파일명 | • React 컴포넌트 : PascalCase
- 페이지명은 __Page로 작성 (예: HomePage.jsx, LoginPage.jsx)
- 네이밍은 종류 - 역할 - 컴포넌트 순으로 (예: LoginSubmitButton.jsx)
• 이미지파일 : kebab-case
- 네이밍은 이미지명-image으로 (예: logo-image.png, happy-lion-image.png)
• jsx : PascalCase
• js : camelCase
• 스타일드 컴포넌트 파일 : ~~Style.jsx로 표현 |
변수명 | • 일반적인 변수, 함수 : camelCase
- 변수: ‘명사형'으로 작성. 무엇을 담고있는지 정확히 표현(예: numberOfPeople)
- 불린형 변수: is로 시작 (예: isOpen)
- 함수 : ‘동사형'으로 작성. 무엇을 하는 함수인지 정확히 표현
* 어떤 값으로부터 다른 값을 계산하는 함수는 get으로 시작 (예: getInputValue)
- 커스텀 훅 : use로 시작 (예: useGetWindowSize)
- 이벤트 함수를 보내는 prop 이름은 on__으로 짓고, 이벤트 함수 이름은 handle__으로 짓기 (아래 예시 참조)
• 상수 : UPPER_SNAKE_CASE
• 생성자 함수, 클래스 : PascalCase |
•
이벤트 함수 props ( on__) + 네이밍 + handler으로 짓기의 예
import { MouseEvent as ReactMouseEvent, useCallback, useState } from 'react'
function FunctionComponent() {
const [searchTerm, setSearchTerm] = useState('')
// 이벤트 핸들러 함수
const onClickSearchButtonHandler = useCallback(e) => { ... })
const onChangeSearchTermHandler = useCallback(e => { ... })
// 이벤트 핸들러 prop
return (
<>
<SearchInput onChange={onClickSearchButtonHandler} />
<SearchButton onClick={onChangeSearchTermHandler} />
</>
)
}
export default FunctionComponent
JavaScript
복사
