2. 코딩컨벤션

모든 네이밍은 모든 팀원이 이해하기 편하면서 심플하게 작성한다.

2-1 디렉토리 및 파일 컨벤션

• 디렉토리 명 : camelCase
• 일반 파일명 : camelCase
• 컴포넌트 파일명 : PascalCase

2-2 함수 및 변수 컨벤션

• 컴포넌트 : 함수형으로 작성
  • 컴포넌트 함수명 : PascalCase로 작성
    • // const Login = ( ) => { }
  • 클래스형 컴포넌트 vs 함수형 컴포넌트
• 일반 함수, 변수명 : CamelCase로 작성
  • // const titleChangeHandler = ( e ) => { }
• file-scope 함수명, 상수 변수 : UPPER_CASE, SNAKE_CASE로 작성
  • // DUMMY_DATA = []
• Boolean 타입의 변수명 : is,has,can 같은 접두사를 붙임
  • // const [ isModal, setIsModal ] = useState( false )
• 핸들러 함수명 : 핸들링하는 handle + 동사 + 명사 형태로 작성
  • // const handle + Change + Title = ( e ) => { }

2-3 컴포넌트 내 코드 작성 구조

import React, { useState, useEffect } from 'react';

// 1. 외부 모듈 및 라이브러리 임포트
import { fetchData } from './api';
import './MyComponent.css';

// 2. 상수, 열거형 및 유틸리티 함수 선언
const API_URL = '<https://api.example.com/data>';

function calculateValue(a, b) {
  return a + b;
}

// 3. 컴포넌트 선언
const MyComponent = () => {
  // 4. useState 훅 선언 // 가장 상단에 선언 해야 한다는 규칙이 있음
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  
  // state 불러오기

  // 5. useEffect 훅 선언 (비동기 데이터 호출 등)
  useEffect(() => {
    fetchData(API_URL).then(response => {
      setData(response);
      setLoading(false);
    });
  }, []);

  // 6. 이벤트 핸들러 함수 선언
  const handleClick = () => {
    console.log('Button clicked');
  };

  // 7. 조건부 렌더링 로직
  if (loading) {
    return <div>Loading...</div>;
  }

  // 8. JSX 반환
  return (
    <div>
      <h1>Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

// 9. 기본 내보내기
export default MyComponent;

• 설명

2-5 컴포넌트 컨벤션

• 컴포넌트의 이름은 반드시 대문자로 시작하여야 합니다.