[React] 네이밍 컨벤션

이번 카카오테크 캠퍼스 FE STEP1 두번째 과제의 피드백 중 네이밍 컨벤션이 일괄적이지 않다는 피드백을 받았다. 알고 보니 React의 경우 폴더, 컴포넌트, 함수 이름 등에 적용되는 네이밍 컨벤션이 다르다는 것이다.!!

그래서 네이밍 컨벤션에 대해 간단히 적어 보았다.

먼저 네이밍 컨벤션이 무엇인가?

네이밍 컨벤션이란
간단하게 말해서 프로그래밍에서 변수나 함수, 클래스, 파일 등에 사용되는 이름을 작성하는 관례나 규칙을 의미한다.

즉 우리가 개발자들 사이에서 지켜줬으면 하는 것이다. 그래야 가독성 및 유지 보수성을 높일 수 있다.

네이밍 컨벤션에 여러 규칙이 존재한다. 내가 알아볼 규칙은 간단하게 4가지만 알아볼 것이다.

• camelCase (카멜 케이스)
  첫 단어는 소문자로 시작하고 그 이후 단어의 첫 문자는 대문자로 적는 방식이다.
  주로 Java, JavaScript 등에서 사용된다.
  ex) userAccount, getUserInfo()

• PascalCase (파스칼 케이스)
  모든 단어의 첫 글자를 대문자로 표기하는 방식이다.
  주로 객체 지향 프로그래밍에서 클래스 및 생성자 이름에 사용된다.
  ex) UserAccount, ProductManager

• snake_case (스네이크 케이스)
  모두 소문자로 작성하고 단어 사이를 밑줄(_)로 구분하여 표기하는 방식이다.
  주로 파이썬에서 사용되며 DB컬럼명으로도 사용된다.
  ex) user_name, total_sales

• kebab-case (케밥 케이스)
  모두 소문자로 작성하고 단어 사이를 대시(-)로 구분하여 표기하는 방식이다.
  주로 HTML, CSS에서 사용된다.
  ex) max-width, my-script

이를 바탕으로 리액트에 적용되는 규칙들을 알아보자!

• 컴포넌트 이름의 경우에는 파스칼 케이스를 권장한다 그리고 컴포넌트 명과 파일명을 일치시킨다.

• 상수는 모두 대문자로 작성하고 단어사이에 밑줄을 넣는다.

• 디렉토리 폴더명은 카멜 케이스를 권장한다 이때 직접 컴포넌트들이 들어있는 폴더명은 파스칼 케이스를 권장한다.

• js 함수나 변수, hook의 경우에는 카멜 케이스를 권장한다.

• Props의 경우 카멜 케이스를 권장한다.

• 상태 변수의 경우 카멜 케이스를 권장한다.

• 이미지나 assets 파일들은 소문자 사용을 권장한다.

위의 규칙 말고도 더 다양한 규칙들이 있지만 현재는 이정도 규칙만 정리해 보았다. 앞으로 더 알게 된다면 추가할 예정이다.