자료를 보던 도중, react에서 kebab-case를 권장하는글을 발견했다.
헉.. 난 지금까지 react에서는 파스칼 케이스가 국룰인줄 알았는데
자료에서 참고로 제시한 문제의 트윗이다.
이에 조금 의아해서 찾아보기로 했는데.
아래는 참고한 블로그와 간단하게 요약한 글이다.
파일 명명 규칙 선택하기
파일 명명 규칙으로 kebab-case를 선택한 이유를 설명하고자 한다.
https://www.dev-archive.com/blog/파일-명명-규칙-선택하기/
프로그래밍에서 많이 사용하는 명명 규칙(naming convention)은 다음 네 가지가 있다.
- PascalCase - 모든 단어의 첫 글자가 대문자
- camelCase - 첫 단어를 제외한 모든 단어의 첫 글자가 대문자
- snake_case - 단어의 경계에서
_를 사용
- kebab-case - 단어의 경계에서 을 사용
대소문자 방식을 피하는 이유
파일 및 디렉터리 이름에서 대소문자를 섞어 쓰는 것은 잠재적으로 문제를 일으킬 수 있다.
예를 들어 Linux에서는 구분하는 반면 Windows와 macOS에서는 대소문자를 구분하지 않는다.
또한 Git의 기본 설정에서는 대소문자의 변화를 무시한다.
깃에서 대소문자 인식하게 하는법.
$ git config core.ignorecase false $ git rm -r --cached . $ git add .
React 컴포넌트에 적용하기
kebab-case를 도입하는 데 있어 거부감이 들었던 것이 React 컴포넌트였다.
React에서는 컴포넌트 이름에 PascalCase를 사용한다. 일반적으로 컴포넌트 파일의 이름은 컴포넌트의 이름과 동일하게 지으며 PascalCase를 적용한다.
하지만 React는 파일 이름의 형식을 강제하지 않으며, 실제로 kebab-case를 적용해도 문제가 생기지 않는다.
가져오기를 할 때도 파일의 이름이 아닌 컴포넌트의 이름을 참조하므로, 자동 완성을 비롯한 에디터의 기능이 잘 작동한다.
사용 사례
파일 이름에 kebab-case를 사용하는 사례는 다음과 같다.
- Google - JavaScript 스타일 가이드에서는 파일 이름에 snake_case나 kebab-case를 사용할 것을 권고한다.
해당 링크의 nextjs의 템플릿을 확인하면
이렇게 케밥 케이스로 파일명 구성
컴포넌트는 파스칼 케이스.