rafce 기본 템플릿 적용 및 폴더 파일 대소문자 관련 부분

Question

기본 템플릿 생성 rafce 적용할 때 파일명 기준으로 객체 변수(NavBar) 생성 되는데 오타 때문에 삭제하고 재생성(Navbar)하면 처음 만들었던 이름 그대로 유지되는 습성이 있는데 삭제 하고 다시 만들때 바로 적용 되도록 환경 설정 따로 하는게 있는지 궁금합니다.
Components 및 Page 폴더 파일 대소문자 구분 생성 이유가 따로 있는지 아니면 개인적인 개발 습관인지 답변 부탁드립니다.

창범 · Answer

답변 감사합니다

닭강정 · Answer

안녕하세요. 남겨주신 질문에 답변 드리겠습니다.

Q1. 기본 템플릿 생성 rafce가 이전 파일이름을 작성하는 경우

A1. 상황을 다시 요약해보면

NavBar.jsx → 처음에 만들고 rafce (React Arrow Function Component Export) 사용
NavBar.jsx 파일을 삭제함
새로 Navbar.jsx 파일 만들고 rafce 입력했는데
여전히 NavBar (이전 이름)으로 컴포넌트가 만들어짐

이 현상은 보통 VSCode의 확장 프로그램(예: ES7+ React/Redux Snippets)이 자동으로 파일명을 기반으로 컴포넌트 이름을 생성하기 때문에 발생합니다.

VSCode가 내부적으로 이전 파일명이나 경로 정보를 캐시하거나 기억하고 있어서, 새로 만든 파일이 실제로는 Navbar.jsx더라도, 예전에 만들었던 NavBar.jsx 파일로 인식하여 컴포넌트 이름을 NavBar로 자동 완성하는 경우가 있습니다.

이 경우에는 자동 생성된 컴포넌트 이름을 직접 Navbar로 수정해 주시는 것이 가장 확실하며, 필요시 VSCode를 재시작하면 캐시된 이름 정보가 초기화되어 해결할 수 있습니다.

Q2. Components 및 Page 폴더 파일 대소문자 구분 생성 이유

A2. Components 및 Pages 폴더에서 대소문자를 구분하여 파일이나 폴더 이름을 작성하는 이유는 그냥 제 스타일입니다. 사실 폴더나 파일 이름에 대한 대소문자 사용에는 명확한 공식 규칙은 없지만, 일반적으로 다음과 같은 컨벤션(관례)이 존재하긴 합니다:

React 컴포넌트 파일: PascalCase (ex. NavBar.jsx, UserCard.jsx)

일반 변수, 함수: camelCase (ex. handleClick, userName)

폴더 이름: kebab-case 또는 PascalCase (개발자마다 다름)

하지만 개인 프로젝트나 팀 내에서 특별한 컨벤션이 없다면 질문자님께서 구분하기 편한 대로 작성하셔도 전혀 문제 없습니다. 감사합니다!

인프런 커뮤니티 질문&답변