내일배움캠프 React_7기 TIL - 29. 코드 컨벤션과 의미 있는 변수명 작성법

코드 컨벤션

클린코드의 핵심은 의미 있는 변수명을 사용하는 것에서 시작한다. 코드 컨벤션은 팀원 모두가 같은 규칙을 따르도록 해 협업을 원활하게 하고, 코드를 빠르게 이해할 수 있게 한다.

장점

• 팀의 코드를 한 사람이 작성한 것처럼 느끼게 함.
• 사람에 의존하지 않고 규칙에 의존하게 만듦.
• 코드의 의도를 빠르게 파악할 수 있음.

---

변수 및 함수 선언 스타일

camelCase

• 사용 위치: 대부분의 변수와 함수 선언에 사용
• 예시:

  const thisIsVariable = true;
  const goToHome = () => {};

kebab-case

사용 위치: 페이지 경로, 폴더명, CSS 클래스 이름 등에 사용
예시:

pages/todo-list/TodoList.tsx
.item-id

snake_case

사용 위치: JS에서 상수 선언 시 대문자 표현으로 사용
예시:

const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000;

PascalCase

사용 위치: 컴포넌트 및 페이지 파일명에 사용
예시:

TodoList.tsx
Detail.tsx

의미 있는 변수명 작성법

명확하고 구체적인 의미를 담기
Bad:

let a = 1;

Good:

let phoneNumber = '010-1234-5678';

Boolean 변수명은 상태를 나타내는 접두사 활용

예시:

const isGood = true;
const hasGirlFriend = false;
const loading = true;

복수 데이터는 복수 표현 사용

Bad:

const todo = [1, 2, 3];

Good:

const todos = [1, 2, 3];

함수명 작성법

동사로 시작하기
Bad:

const home = () => {};

Good:

const goToHome = () => {};

구조 분해 할당과 스프레드 연산자 활용

스프레드 연산자

배열:

const array = [1, 2, 3];
const newArray = [...array];

객체:

const obj = { key: 1 };
const newObj = { ...obj };

구조 분해 할당

배열:

const [state, setState] = useState();

객체:

const ItemComponent = ({ title }) => <span>{title}</span>;

스프레드 연산자와 구조 분해 할당 혼합 사용

컴포넌트:

const Parent = ({ title, ...rest }) => (
  <>
    <span>{title}</span>
    <Child {...rest} />
  </>
);

const Child = ({ content, subTitle }) => (
  <>
    <span>{content}</span>
    <span>{subTitle}</span>
  </>
);

함수:

const validBoolean = (...args) => args.every(isTrue => isTrue);

조건문

1. 명확한 조건 선택하기

긍정 조건 사용하기

부정 조건은 가독성이 떨어지므로 가능하면 긍정 조건을 사용한다.

// Bad
const isNotBoy = false;
if (!isNotBoy) {}

// Good
const isBoy = true;
if (isBoy) {}

꼭 부정문을 사용해야 한다면

const isBoy = !isNotBoy; // if 문 바로 상단에서 긍정 조건으로 변경
if (isBoy) {}

2. 조건문에 이름 붙이기

조건문은 명확한 의미를 담도록 이름을 붙인다.

// Bad
if (name === 'js' && obj.someProperty.title === "sparta" && height < 180) {}

// Good
const isJsTutor = name === 'js' && obj.someProperty.title === "sparta" && height < 180;
if (isJsTutor) {}

3. 함수를 통해 조건 사용하기

복잡한 조건문은 함수로 분리하여 재사용성과 유지보수를 높인다.

// Bad
if (name === 'js' && obj.someProperty.title === "sparta" && height < 180) {}

// Good
const checkThisDataValid = ({ name, title, height }) => {
  let result = true;
  // 비즈니스 로직
  return result;
};

if (checkThisDataValid({ name, title, height })) {}

4. 조건문의 성능은 신경 쓰지 말기

• 적은 수의 조건문에서 성능 차이는 미미하다.
• 압축된 조건문보다는 가독성이 더 중요하다.

5. 조건과 반복 Depth 줄이기

조건문과 반복문의 중첩이 깊어지지 않도록 주의한다.
Guard Clause(Early Return)를 활용해 깊이를 최소화한다.

// Bad
async function guardClause(userId) {
  const user = await getUser(userId);
  if (user) {
    const orders = await getOrders(user);
    if (orders && orders.length > 0) {
      const order = orders.find(order => order.value > 100);
      if (order) {
        console.log(`Found an order from user ${user.id} with value greater than 100: ${order.id}`);
      }
    }
  }
}

// Good
async function guardClause(userId) {
  const user = await getUser(userId);
  if (!user) return;

  const orders = await getOrders(user);
  if (!orders || orders.length === 0) return;

  const order = orders.find(order => order.value > 100);
  if (!order) return;

  console.log(`Found an order from user ${user.id} with value greater than 100: ${order.id}`);
}

6. Object Mapping 활용

Object Mapping을 사용해 조건문을 효과적으로 대체한다.

function loginWithKakao() {}
function loginWithGoogle() {}
function loginWithApple() {}

const socialMapper = {
  kakao: loginWithKakao,
  google: loginWithGoogle,
  apple: loginWithApple,
};

const socialLogin = (social) => {
  socialMapper[social]();
};

탈출문 작성법

Early Return 사용하기

• Early Return은 불필요한 실행을 줄이고 코드를 간결하게 만든다.
• 단, 함수의 흐름을 분산시키지 않도록 신중히 사용한다.

초기값 설정
반환값이 필요한 경우, 명확한 초기값을 설정해 undefined로 인한 문제를 방지한다.

function calculateTotalPrice(items) {
  let totalPrice = 0;

  if (!items || items.length === 0) {
    return totalPrice;
  }

  items.forEach(item => {
    totalPrice += item.price * item.quantity;
  });

  return totalPrice;
}

주의사항

• Early Return이 많아지면 함수의 흐름이 분산될 수 있다.
• 초기값을 설정해 반환값을 명확히 한다.

코드 퀄리티&가독성 올리기

1. 함수의 분리

• 명확하고 읽기 좋은 코드 작성: 함수명을 통해 코드의 의도를 드러내고, 각 함수는 하나의 역할만 수행해야 한다.

• 단일 책임 원칙 : 하나의 함수는 한 가지 동작만 하도록 설계해야 한다.
  ( 예: 계산 함수는 add, minus처럼 개별 동작으로 나눈다.)
  

• 인수 개수 제한: 함수 인수는 최대 두 개가 적합하며, boolean을 사용하여 조건을 분기하지 않는다.

2. Custom Hook 사용

• 반복되는 비즈니스 로직을 분리하여 재사용성을 높인다.
  ( 예: API 호출 로직을 useFetch 훅으로 분리하여 여러 컴포넌트에서 활용.)

3. 파일 분리 및 이름 짓기

• 역할 기반 분리: 컴포넌트, 훅, 서비스 등을 목적에 따라 별도 파일로 나눈다.
• 명확한 네이밍: 파일명은 역할을 반영해야 하며, 일관된 컨벤션을 따른다.
  ( 예: 컴포넌트 파일(MyComponent.js), 훅(useFetch.js), 서비스(apiService.js))
• 폴더 구조: 프로젝트가 커질수록 중첩된 폴더 구조로 관련된 코드를 묶는다.

/src
  /components
    /Button
      index.js
      Button.test.js
  /hooks
    useFetch.js
  /services
    apiService.js

4. 응집도 높이기

• 관련 코드 근접: 밀접하게 연관된 코드는 같은 파일이나 폴더에 배치.
• 긍정 조건으로 리팩터링: 조건문은 부정 조건이 아니라 긍정 조건으로 작성.

개선을 위한 실전 팁

• 코드를 작성하면서 '이 함수는 한 가지 동작만 하고 있는가?'를 자문.
• 프로젝트 구조를 정기적으로 점검하고, 찾기 어려운 파일이 있다면 구조를 재조정.
• 비슷한 기능이나 로직은 묶어두어 관리 편의성을 높인다.

위 내용을 활용하면 코드의 가독성과 유지보수성을 크게 향상시킬 수 있다.