[공부] 나만의 코딩 컨벤션 (react)

제가 코드 작성하면서 나만의 컨벤션을 작성해보았습니다.

 

📖 정리

파일

컴포넌트 파일

컴포넌트로 분리된 파일은 PascalCase를 적용한다.

Header.jsx
Main.jsx
PopUpNews.jsx

 

컴포넌트 이외의 파일

컴포넌트가 아닌 파일은 camelCase 스타일을 적용한다.

fetchApi.jsx
auth.jsx

 
스타일 시트 파일(CSS)은 스타일 시트 적용할 파일명과 동일하게 맞춘다.

Header.jsx
Header.css

 
다른 스타일 시트 파일(ex. Styled-components)은, 스타일 시트 적용할 파일명 + .style 를 붙여준다. (내가 선호하는 컨벤션!)
또는 camelCase로 작성한다.
camelCase로 작성하는 사람들이 많아 취향따라 다른거 같다.

Header.tsx // 컴포넌트 파일
Header.style.ts // 스타일링 파일 컨벤션1
HeaderStyle.ts // 스타일링 파일 컨벤션2

 
서로 연관된 파일들은 하나의 폴더에 넣어준다.
컴포넌트 폴더의 컨벤션은 PacalCase 으로 작성한다.
반대로 컴포넌트와 관련없는 폴더는 camelCasd로 작성한다

components ─── SignupForm
                        └ SignupForm.jsx
                        └ SignupForm.test.jsx
                        └ SignupForm.style.js

 

변수명

변수

변수는 camelCase와 영어 대소문자, 숫자를 사용한다.

const isLog = false;
const list2 = ["a", "b"];

 
만약 변수에 할당되는 값이 boolean인 경우에는 is를 접두사로 붙인다.

const isLoading = false;
const isOpen = true;

 

상수

상수는 대문자로만 작성하고, 
여러개의 단어를 합성한 경우, underscore를 이용하여 단어 사이를 구분한다.

const URL = 'https://naver.com'
const BASE_URL = 'https://naver.com'

 

함수명

이벤트 핸들러

이벤트 함수명은 컨벤션이 2가지가 있다.
첫번째 컨벤션은 handle + 이벤트를 붙이는 것이고, (내가 선호하는 컨벤션!)
두번째 컨벤션은 (on) + Event + Handler를 붙이는 것이다.

<button onClick={handleClick}>리셋 버튼</button>

<button onClick={onClickHandler}>리셋 버튼</button>

 
만약 사용되는 이벤트 함수가 여러개 있을 경우, 어떤 기능을 가지고 있는지 유추할 수 있는 단어를 함께 작성해준다.

<button onClick={handleResetClick}>리셋 버튼</button>
<button onClick={handleSubmitClick}>제출 버튼</button>

<button onClick={onClickResetHandler}>리셋 버튼</button>
<button onClick={onClickSubmitHandler}>제출 버튼</button>

 

유틸 함수

유틸함수가 반환하는 값을 기준으로 함수명을 작성한다.

// boolean 값을 반환하는 경우 : <has> prefix 사용
const hasEmail = () => {
	return isLogin ? true : false
}

// 데이터에서 추출한 값을 반환하는 경우 : get (내가 선호하는 컨벤션!)또는 find prefix를 사용
const getProductById = (products, id) => {
	return products.find(product => product.id === id)
}

 
 

API 요청 함수

이 부분은 사람마다 다른거 같다.
내가 사용하고 있는 API 요청 함수 컨벤션이다.

// 유틸함수의 getProducts와 의미가 중복될 염려가 있어서 fetch로 사용한다.
const fetchProducts = () => {}

// product 추가
const createProduct = () => {}

// product 수정
const updateProduct = () => {}

// product 삭제(1개)
const deleteProduct = () => {}

// products 삭제(모두)
const removeProduct = () => {}

 

Styled-components

태그명은 S + PascaleCase으로 작성한다. (스타일을 입힌 태그라는 의미의 style를 접두사로 붙인다.)

export const SSection = styled.div`
	// code
`

export const SHeader = styled.header`
	// code
`

export const SSection = styled.section`
	// code
`

export const SInput = styled.input`
	// code
`

 
감싸는태그 중, 최상위 태그의 경우에는 S + Layout 으로 작성한다. (Wrapper는 사용하지 말 것!)
감싸는 태그 이름에는 정해진 순서가 없지만, 코드를 작성하다보면 자동으로 SLayout > SContainer > SBox 순으로 작성하게 된다. 

export const SLayout = styled.div`
	// code
`

export const SContainer = styled.div`
	// code
`

export const SBox = styled.div`
	// code
`

 
풀네임을 쓰는 것을 권장하지만, 만약 약어를 써야하는 약속을 한 경우에는 약어를 써도 된다.

# 예시
export const SBtn = styled.button`
	// code
`

 
중복 사용되는 태그가 있다면, 어떤 기능을 가지고 있는지 유추할 수 있는 단어를 함께 작성해준다.

export const SPopUpHeader = styled.header`
	// code
`

export const SHomeHeader = styled.header`
	// code
`

export const SLogInBtn = styled.button`
	// code
`

export const SLogOutBtn = styled.button`
	// code
`

 
스타일을 넣지 않을 태그는 Styled-components로 선언 자체를 하지 않는다. 
물론 스타일을 넣을 경우에는 Styled-components로 선언하는 것이 좋다.

return {
    <SLayout>
        <div>  // 의미 없이 컨테이너 역할을 하는 태그는 그냥 div 태그로 사용한다.
            <STitle>타이틀</STitle>
            <SDesc>서브타이틀</SDesc>
        </div>
    </SLayout>
}

return {
    <SLayout>
        <TitleBox> // 물론 컨테이너에서 스타일을 적용해야하는 경우, Styled-components로 선언한다.
        	<STitle>타이틀</STitle>
        	<SDesc>서브타이틀</SDesc>
        </TitleBox>
    </SLayout>
}

 

중요한 점

변수명이나 함수명을 짧게 작성하는 것도 중요하지만, 의미를 정확하게 내포하도록 명명하는 것 또한 중요하다.

이름을 짧게 명명하는거에 익숙했는데, 여러 행사에 참여하여 실무에서 일하시는 분들의 대화를 들어보니 이름이 길어지더라도 의미를 정확하게 유추할 수 있도록 명명하라고 당부하신다.

// 만약 id 값을 이용하여 products 데이터에서 추출
const getProductById = () => {}

// id와 size 값을 이용하여 products 데이터에서 추출
const getProductByIdAndSize = () => {}