리액트 코드를 작성할 때, 지키면 좋을 네이밍 컨벤션을 정리 해봤습니다. 통일성 있는 네이밍 컨벤션으로 코드를 정리하면 코드의 가독성과 유지보수성도 높일 수 있고, 기분도 좋아져요.
1. 컴포넌트 이름
컨벤션: PascalCase
이유: 리액트 컴포넌트는 JSX에서 사용될 때 HTML 태그(ex <div>)와 구별되어야 합니다. PascalCase 사용은 컴포넌트가 생성자 함수(or 클래스)임을 명시적으로 나타냅니다.
예시
function UserProfileContainer() {
return <div> User Profile </div>;
}
2. 이벤트 핸들러
컨벤션: on 혹은 handle을 접두어로 사용하고 이벤트를 처리하는 목적을 설명
이유: 이벤트 핸들러와 관련된 이벤트를 명확하게 식별하기 위해서입니다. 이벤트 핸들러의 역할을 쉽게 이해할 수 있게 도와줍니다.
예시
function SearchButton() {
const handleClick = () => {
console.log('button clicked');
};
return <button onClick={handleClick}>Search</button>;
}
3. prop 이름
컨벤션: camelCase
이유: JavaScript에서는 camelCase가 변수와 속성 이름에 대한 일반적인 규칙입니다. 리액트에서도 이 규칙을 따라 일관성을 유지합니다.
예시
function Container({ userName }) {
return <div>{userName}</div>;
}
4. boolean 타입 prop
컨벤션: is 또는 has로 시작
이유: 불리언 값의 목적이나 상태를 명확히 나타내기 위해서입니다. 이는 prop이 불리언 값임을 직관적으로 이해할 수 있게 합니다.
function Modal({ isVisible }) {
return isVisible ? <div>Modal Content</div> : null;
}
5. 상태값과 상태 설정 함수
컨벤션:
useState훅을 사용할 때,set을 접두어로 사용하여 상태 변수에 대한 설정 함수를 명명이유: 다른 언어에서부터 많이 사용해오던 setter 함수임을 명시적으로 알려줍니다. 또한 코드를 읽는 사람이 상태 변수와 그 변수를 업데이트하는 함수 간의 관계를 쉽게 이해할 수 있습니다.
예시
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>Increase</button>
</div>
);
}
6. 상수
컨벤션: UPPER_CASE
이유: 상수 값이 변하지 않음을 명시적으로 나타내기 위해 사용합니다. 이는 코드 내에서 상수를 쉽게 식별할 수 있게 해줍니다.
예시
const API_URL = 'https://api.example.com/data';
function fetchData() {
fetch(API_URL)
.then(response => response.json())
.then(data => console.log(data));
}
7. 파일 이름
컨벤션: 컴포넌트의 경우 PascalCase, 다른 모든 파일은 kebab-case 혹은 camelCase
이유: 컴포넌트는 컴포넌트 이름과 일치시키기 위해, 다른 파일명들은 케밥케이스의 경우 웹 개발 전반에서 파일명에 많이 쓰이기도 하고, 카멜케이스의 경우 자바스크립트의 기본 네이밍 컨벤션이기 때문에 둘 다 선택 가능합니다.
예시
컴포넌트:
UserProfile.jsx일반 파일:
api-utils.js아니면apiUtils.js
마치며
어떤 프로젝트든 공통적으로 적용되면 좋은 간단한 컨벤션들을 정리해봤습니다. 이런 규칙들을 지킴으로 인해 조금이라도 더 코드가 읽기 좋아졌기를 바랍니다.
