[FE] 코딩 컨벤션

프론트엔드 코딩 규칙

1. 함수 작성

• 이벤트 함수 앞에는 handle을 붙입니다.
• 함수 이름은 함수의 기능을 나타내야합니다.
• 함수는 가장 작은 단위로, 재사용이 가능하며, 독립적으로 작성합니다.

const handleLogin = () => {
  return setLogin(true);
}

2. 변수 작성

• 기본 선언문은 const를 사용하고, 사용이 불가능한 경우 let을 사용합니다. (var를 사용하지 않습니다.)

종류	케이스	예시
파일 / 컴포넌트	파스칼 케이스	PascalCase
interface / type 별칭 / styled component	파스칼 케이스	PascalCase
폴더 / 함수명 / 변수명 및 그 외	카멜 케이스	camelCase
환경 변수명 (.env)	스네이크 케이스	SNAKE_CASE
reducer	변수명 앞에 'set' 붙이기	setReducer

3. 주석 작성

• 주석으로 변수를 설명합니다.
• 타인이 알아볼 수 있도록 코드를 정리합니다. (항상 가독성을 생각합니다.)
• 직관적으로 이해하기 어려운 코드라고 판단되면 주석을 작성합니다.

const memberData = useSelector(state => state.member.memberInfo) // 유저의 페이지 정보를 가지고 있음.

4. 컴포넌트 구성

const Main = () => {
  return (
    <div>이러한 형태의 컴포넌트로 작성하기!</div>
  );
};

export default Main;

5. import 순서

• 순서 : 내장 (ex. 'react') => 외부 (ex. 서드파티 노트 모듈) => 내부

예시) <br>
import React, { useState, useEffect, useCallback } from "react";
import { useSelector, useDispatch } from "react-redux";
import axios from 'axios';

import Typography from "@material-ui/core/Typography";
import Grid from "@material-ui/core/Grid";
import { DatePicker } from "@material-ui/pickers";

import { getServiceURL } from '../../utils/getServiceURL";
import { sectionTitleEnum } from "../../constants";
import CustomButton from "../components/CustomButton";
import Title from "../components/Title";

그 외 규칙

1. children이 불필요할 때 셀프 클로징 태그 사용하기

// 틀린 예시
<input></input>

// 올바른 예시
<input />

2. div가 불필요할 때는 fragment 사용하기

// 틀린 예시
const InfoText = () => {
  return (
    <h1>Welcome!</h1>
    <p>This our new page, we're glad you're are here!</p>
  )
}

// 올바른 예시
const InfoText = () => {
  return (
    <>
      <h1>Welcome!</h1>
      <p>This our new page, we're glad you're are here!</p>
    </>
  )
}