여느 때와 다름없이 개발 중이었는데 너무 지저분한 className에 놀라서 작성해보는 글이다 😓
🗣️ Component
각 컴포넌트의 역할을 명확하게 보여줄 수 있도록 이름을 짓고 PascalCase 를 사용한다.
PascalCase: 각 단어의 첫 글자를 대문자로 하며 가장 첫 글자도 대문자로 시작하는 규칙
// ✅
const SubmitBtn = () => { ...
// ❌
const submitBtn = () => { ...
const button = () => { ...📂 File
해당 파일 내의 컴포넌트 이름과 매칭시키고 PascalCase를 사용한다.
// ✅
[SubmitBtn.jsx]
const SubmitBtn = () => { ...
// ❌
[submit.jsx]
const SubmitBtn = () => { ...🗿 Constant
상수는 모든 글자를 대문자로 표현하고 underscore _ 을 사용한다.
// ✅
const API_URL = "https://api.example.com";
const MAX_COST = 100;
// ❌
const api_URL = "https://api.example.com";
const maxCost = 100;🚚 Props
목적을 명확하게 나타낼 수 있는 descriptive 한 이름을 사용한다. 해당 프로젝트에서 널리 사용되는 약어나 줄임말이 아닌 이상 줄여쓰는 것은 피해야 한다.
// ✅
user, button, ...
// ❌
usr, btn, ...🐟 State 변수
boolean 값을 가지는 상태 변수에는 is, has, should 같은 접두어를 붙인다.
// ✅
isActive, hasError, shouldRender🐍 className
여러 스타일이 있지만 BEM: Block, Element, Modifier 방식을 사용하기로 했다.
BEM: 큰 컴포넌트를 block, 그 안의 구성요소를 element, 상태나 변형을 modifier로 나누는 명명 규칙
className을 보고 어떤 역할을 하는 지 알 수 있어 가독성이 좋고 modifier만 붙이면 다양한 상태를 구현할 수 있어 확장성이 좋다는 장점이 있다.
block__element--modifier| 구성 | 설명 | 예시 |
|---|---|---|
| Block | 컴포넌트 단위 | login |
| Element | Block 내부 요소 | login__input |
| Modifier | 상태나 변형 | login__input--error |
⚠️ 주의점
요소 안에 또 요소를 작성하거나 많은 modifier을 사용하지 않는다.
login__input__label ❌
login__lable or login__input--label<button className="login__button login__button--primary">로그인</button>위 코드처럼 2개 이상의 class를 사용하여 여러 요소에 공통적으로 적용해야할 스타일과 특정 요소의 상태나 역할에 따른 추가 스타일을 지정할 수 있다. 이 때 class 이름 사이에는 공백을 넣어야 한다.
물론 100% 정답이고 반드시 지켜야만 하는 사항은 아니지만, 다른 사람들과 협업을 해야하는 개발자의 입장에서 명확한 규칙을 가지고 그것을 지켜가며 개발하는 것도 중요한 역량이라는 생각이 든다!
나~중에 현업에 들어가게 되면 내가 속한 조직에서 쓰는 규칙에 맞게 해야될테니까 혼자서 개발할 때에도 규칙을 세우고 번거롭더라도 그것을 고려해가며 개발해야겠다 💪
[참고자료]
https://getbem.com/naming/
https://dev.to/kristiyanvelkov/react-js-naming-convention-lcg
https://stackoverflow.com/questions/57221878/react-classname-naming-convention
