테드풀의 한 입 지식🍮
리액트 네이밍 컨벤션 정리

Photo by Patrick Perkins on Unsplash

리액트 네이밍 컨벤션 정리

리액트에서 권장하는 네이밍 컨벤션을 간단하게 정리해봤습니다.

Ted Lee's photo
Ted Lee
·

2 min read

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

1. 컴포넌트 이름

  • 컨벤션: PascalCase

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

  • 예시

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

2. 이벤트 핸들러

  • 컨벤션: on을 접두어로 사용하고 이벤트를 처리하는 목적을 설명

  • 이유: 이벤트 핸들러의 목적과 관련된 이벤트를 명확하게 식별하기 위해서입니다. 이는 이벤트 핸들러의 역할을 쉽게 이해할 수 있게 도와줍니다.

  • 예시

function SearchButton() {
    const handleOnClick = () => {
        console.log('button clicked');
    };
    return <button onClick={handleOnClick}>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

마치며

어떤 프로젝트든 공통적으로 적용되면 좋은 간단한 컨벤션만 정리해봤습니다. 이런 규칙들을 지킴으로 인해 조금이라도 더 제품의 수명 주기가 늘어나길 바랍니다.

React#namingconvention