# 리액트 네이밍 컨벤션 정리

리액트 코드를 작성할 때, 지키면 좋을 네이밍 컨벤션을 정리 해봤습니다. 통일성 있는 네이밍 컨벤션으로 코드를 정리하면 코드의 가독성과 유지보수성도 높일 수 있고, 기분도 좋아져요.

## 1\. 컴포넌트 이름

* **컨벤션**: PascalCase
    
* **이유**: 리액트 컴포넌트는 JSX에서 사용될 때 HTML 태그(ex <div>)와 구별되어야 합니다. PascalCase 사용은 컴포넌트가 생성자 함수(or 클래스)임을 명시적으로 나타냅니다.
    
* **예시**
    

```javascript
function UserProfileContainer() {
    return <div> User Profile </div>;
}
```

## 2\. 이벤트 핸들러

* **컨벤션**: on 혹은 handle을 접두어로 사용하고 이벤트를 처리하는 목적을 설명
    
* **이유**: 이벤트 핸들러와 관련된 이벤트를 명확하게 식별하기 위해서입니다. 이벤트 핸들러의 역할을 쉽게 이해할 수 있게 도와줍니다.
    
* **예시**
    

```javascript
function SearchButton() {
    const handleClick = () => {
        console.log('button clicked');
    };
    return <button onClick={handleClick}>Search</button>;
}
```

## 3\. prop 이름

* **컨벤션**: camelCase
    
* **이유**: JavaScript에서는 camelCase가 변수와 속성 이름에 대한 일반적인 규칙입니다. 리액트에서도 이 규칙을 따라 일관성을 유지합니다.
    
* 예시
    

```javascript
function Container({ userName }) {
    return <div>{userName}</div>;
}
```

## 4\. boolean 타입 prop

* 컨벤션: is 또는 has로 시작
    
* 이유: 불리언 값의 목적이나 상태를 명확히 나타내기 위해서입니다. 이는 prop이 불리언 값임을 직관적으로 이해할 수 있게 합니다.
    

```javascript
function Modal({ isVisible }) {
  return isVisible ? <div>Modal Content</div> : null;
}
```

## 5\. 상태값과 상태 설정 함수

* **컨벤션**: `useState` 훅을 사용할 때, `set`을 접두어로 사용하여 상태 변수에 대한 설정 함수를 명명
    
* **이유**: 다른 언어에서부터 많이 사용해오던 setter 함수임을 명시적으로 알려줍니다. 또한 코드를 읽는 사람이 상태 변수와 그 변수를 업데이트하는 함수 간의 관계를 쉽게 이해할 수 있습니다.
    
* **예시**
    

```javascript
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
    
* **이유**: 상수 값이 변하지 않음을 명시적으로 나타내기 위해 사용합니다. 이는 코드 내에서 상수를 쉽게 식별할 수 있게 해줍니다.
    
* **예시**
    

```javascript
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`
        

## 마치며

어떤 프로젝트든 공통적으로 적용되면 좋은 간단한 컨벤션들을 정리해봤습니다. 이런 규칙들을 지킴으로 인해 조금이라도 더 코드가 읽기 좋아졌기를 바랍니다.