React 네이밍 규칙

React 네이밍 규칙

팀 프로젝트의 경우 네이밍 규칙을 따라 개발된 코드로 작업할 경우 직관적인 코드 이해와 빠른 전달력으로 작업 효율을 늘릴 수 있다.

프로그래밍 네이밍 규칙법

• 카멜(camelCase)표기법 : 소문자로 시작하고 대문자로 시작하는 모든 후속 단어
• 파스칼(PascalCase)표기법 : 모든 단어는 대문자로 시작
• 스네이크(snake_case)표기법 : 밑줄로 구분된 단어
• 케밥(kebab-case)표기법 : 하이픈으로 구분된 단어

React 폴더 네이밍 규칙

• 카멜 케이스를 기본으로 한다
• 직접적으로 바로 컴포넌트들이 들어있는 컴포넌트 폴더명은 대문자로 시작하여 파스칼(PascalCase) 표기법을 따른다.

React 파일 네이밍 규칙

• 파스칼(PascalCase) 기본으로 한다
• 컴포넌트일 경우만 .jsx 확장자를 사용한다. (그 외에는 .js)
• customHook을 사용하는 경우 : use + 함수명

React 컴포넌트 네이밍 규칙

• 파스칼(PascalCase) 표기법을 따라 모든 단어의 첫 시작을 대문자로한다

React 함수,변수,hook 네이밍 규칙

• 카멜(camelCase)표기법을 따라 첫시작 단어의 첫글자만 소문자 이후 후속 단어의 시작을 대문자로한다

React 이벤트 핸들러 네이밍 규칙

• Props의 경우: on (onClick 등등)
• 함수인 경우: handle (handleClick 등등)