Spring Boot + React + MySQL 네이밍 정리표

1. Spring Boot + React + MySQL 네이밍 정리표

구분 항목 예시 네이밍 규칙 / 설명

백엔드 (Spring Boot)	클래스명	UserService, PostController	PascalCase (기능 + 역할)
	메서드명	getUserInfo(), deletePost()	camelCase (동사 + 명사)
	변수명	userId, postList	camelCase, 의미 있는 이름
	패키지명	com.project.user	소문자 + 도메인 기반 분리
	엔티티명	User, Post	PascalCase, DB 테이블 매핑 대상
	DTO명	UserResponseDto, LoginRequestDto	PascalCase, Request/Response 명시
	URL 경로	/api/users/{id}	소문자 + 복수형 + RESTful
	상수명	DEFAULT_ROLE, MAX_PAGE_SIZE	SCREAMING_SNAKE_CASE

---

구분 항목 예시 네이밍 규칙 / 설명

프론트엔드 (React)	컴포넌트명	LoginPage.jsx, UserCard.js	PascalCase, 기능 단위 구성
	함수명	handleLogin(), fetchUser()	camelCase, 동사로 시작
	상태 변수	userInfo, isLoading	camelCase, useState 기준 명확하게
	파일명	LoginPage.jsx, user-api.js	기능명 기반 + 일관성
	훅 이름	useLogin(), useUserFetch()	use + 동사, custom hook 관습
	폴더명	components, pages, api	소문자 + 복수형 권장
	CSS 클래스	login-form, user-profile	kebab-case, Tailwind 사용 시 예외 가능

---

구분 항목 예시 네이밍 규칙 / 설명

데이터베이스 (MySQL)	테이블명	users, posts	소문자 + 복수형 + snake_case
	컬럼명	user_id, created_at	snake_case, 명확한 의미
	PK명	id	기본 키는 간단하게
	FK명	user_id, post_id	참조 테이블 + _id
	제약조건명	fk_user_post, idx_user_email	fk_, idx_ 접두사 + 명확한 대상

---

추가 팁

• 클래스/컴포넌트는 명사 중심.
  메서드/함수는 동사 중심.
• URL, DB는 snake_case.
• 자바, 자바스크립트는 camelCase/PascalCase.
• 한 가지 스타일로 팀 전체가 일관되게 쓰는 것이 가장 중요해요.

2. React에서 useState 네이밍 패턴

React에서 useState는 **컴포넌트의 핵심 상태(state)**를 정의하기 때문에,
이름만 보고도 이 상태가 어떤 용도인지 쉽게 알 수 있어야 함.

---

예시 비교

나쁜 예 좋은 예 이유

data	userList	어떤 데이터인지 명확히
value	emailInput	어떤 입력값인지 구체적으로
bool	isLoading	불리언이면 is~, has~
temp	selectedPostId	임시 변수도 명확하게

요약

• useState는 의미 있는 이름을 써야 UI 코드가 읽기 쉬워짐.
• 단순히 data, value, temp처럼 추상적인 이름은 피하는 게 좋음.
• 역할 기반 네이밍을 지키는 게 핵심.

---

자주 쓰는 useState 네이밍 패턴

용도 변수명 Setter 함수 설명

입력값	email, setEmail	사용자 입력 텍스트
비밀번호	password, setPassword	로그인/회원가입 입력
검색어	searchQuery, setSearchQuery	검색창 입력
체크박스	isChecked, setIsChecked	불리언 값
로딩 여부	isLoading, setIsLoading	API 호출 상태 표시
에러 여부	hasError, setHasError	오류 상태 표시
성공 여부	isSuccess, setIsSuccess	성공 메시지 표시 조건
선택된 ID	selectedId, setSelectedId	선택 항목의 ID
현재 페이지	currentPage, setCurrentPage	페이지네이션
모달 상태	isModalOpen, setIsModalOpen	모달 열림/닫힘
항목 목록	itemList, setItemList	배열 상태
폼 상태	formData, setFormData	전체 폼 객체 관리
필터 옵션	filterOption, setFilterOption	필터 조건 선택
알림 메시지	alertMessage, setAlertMessage	텍스트 알림 표시

---

네이밍 팁 요약

• 불리언이면: is, has, can + 동사/명사
  → isLoggedIn, hasError, canSubmit
• 리스트면: ~List, ~Items, ~Array
  → userList, commentItems
• 선택값이면: selected~, current~
  → selectedId, currentTab
• 사용자 입력
  →  input, form, value