Refactoring 최신 기능 소개

코드 리팩토링의 최신 패턴과 기법을 소개합니다. 실무에서 바로 적용할 수 있는 5가지 핵심 리팩토링 기법을 코드 예제와 함께 학습합니다.

---

---

들어가며

이 글에서는 Refactoring 최신 기능 소개에 대해 상세히 알아보겠습니다. 총 8가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. Optional_Chaining으로_안전한_접근
2. Nullish_Coalescing으로_기본값_설정
3. 객체_구조_분해로_매개변수_개선
4. Early_Return으로_중첩_제거
5. Array_메서드_체이닝으로_선언적_코드
6. 타입_좁히기로_안전한_코드
7. 상수_추출로_매직_넘버_제거
8. 함수_분리로_단일_책임_원칙

---

1. Optional Chaining으로 안전한 접근

개요

중첩된 객체 속성에 안전하게 접근하기 위해 Optional Chaining(?.)을 사용하여 null/undefined 체크를 간결하게 만듭니다.

코드 예제

// Before
const userName = user && user.profile && user.profile.name;

// After
const userName = user?.profile?.name;

설명

Optional Chaining을 사용하면 각 단계에서 null/undefined를 자동으로 체크하여 에러 없이 안전하게 속성에 접근할 수 있습니다.

---

2. Nullish Coalescing으로 기본값 설정

개요

null 또는 undefined일 때만 기본값을 사용하도록 Nullish Coalescing(??) 연산자를 활용합니다.

코드 예제

// Before
const count = value !== null && value !== undefined ? value : 0;

// After
const count = value ?? 0;
// 0, false, '' 같은 falsy 값도 유지됨

설명

?? 연산자는 null/undefined만 체크하므로 0, false, 빈 문자열 같은 유효한 falsy 값을 기본값으로 대체하지 않습니다.

---

3. 객체 구조 분해로 매개변수 개선

개요

함수 매개변수가 많을 때 객체 구조 분해를 사용하여 가독성을 높이고 순서 의존성을 제거합니다.

코드 예제

// Before
function createUser(name: string, age: number, email: string) {
  return { name, age, email };
}

// After
function createUser({ name, age, email }: UserParams) {
  return { name, age, email };
}

설명

객체로 매개변수를 받으면 순서를 신경 쓰지 않아도 되고, 필요한 속성만 명확하게 전달할 수 있습니다.

---

4. Early Return으로 중첩 제거

개요

조건문의 중첩을 줄이기 위해 Early Return 패턴을 사용하여 코드의 깊이를 줄이고 가독성을 향상시킵니다.

코드 예제

// Before
function processUser(user: User) {
  if (user) {
    if (user.isActive) {
      return user.data;
    }
  }
}

// After
function processUser(user: User) {
  if (!user || !user.isActive) return;
  return user.data;
}

설명

Early Return을 사용하면 예외 상황을 먼저 처리하여 중첩을 제거하고 메인 로직을 명확하게 표현할 수 있습니다.

---

5. Array 메서드 체이닝으로 선언적 코드

개요

for 루프 대신 map, filter, reduce 같은 배열 메서드를 체이닝하여 선언적이고 읽기 쉬운 코드를 작성합니다.

코드 예제

// Before
const result = [];
for (let i = 0; i < users.length; i++) {
  if (users[i].age >= 18) {
    result.push(users[i].name);
  }
}

// After
const result = users
  .filter(user => user.age >= 18)
  .map(user => user.name);

설명

배열 메서드 체이닝은 각 단계의 의도를 명확하게 표현하여 코드의 가독성과 유지보수성을 크게 향상시킵니다.

---

6. 타입 좁히기로 안전한 코드

개요

Type Guard를 사용하여 런타임에 타입을 좁혀 타입 안정성을 확보하고 불필요한 타입 단언을 제거합니다.

코드 예제

// Before
function handleValue(value: string | number) {
  return (value as string).toUpperCase();
}

// After
function handleValue(value: string | number) {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
}

설명

typeof 같은 Type Guard를 사용하면 TypeScript가 자동으로 타입을 추론하여 안전하게 메서드를 호출할 수 있습니다.

---

7. 상수 추출로 매직 넘버 제거

개요

코드에 직접 작성된 숫자나 문자열을 의미 있는 이름의 상수로 추출하여 코드의 의도를 명확하게 합니다.

코드 예제

// Before
if (user.age >= 18 && user.status === 'active') {
  // ...
}

// After
const ADULT_AGE = 18;
const ACTIVE_STATUS = 'active';

if (user.age >= ADULT_AGE && user.status === ACTIVE_STATUS) {
  // ...
}

설명

매직 넘버를 상수로 추출하면 코드의 의미가 명확해지고 값 변경 시 한 곳만 수정하면 됩니다.

---

8. 함수 분리로 단일 책임 원칙

개요

하나의 함수가 여러 일을 하지 않도록 작은 단위로 분리하여 재사용성과 테스트 용이성을 높입니다.

코드 예제

// Before
function saveUser(userData: UserData) {
  const validated = validate(userData);
  const formatted = format(validated);
  database.save(formatted);
  sendEmail(formatted.email);
}

// After
function saveUser(userData: UserData) {
  const user = prepareUser(userData);
  persistUser(user);
  notifyUser(user);
}

설명

각 함수가 하나의 명확한 책임만 가지도록 분리하면 코드를 이해하고 수정하기 쉬워집니다.

---

마치며

이번 글에서는 Refactoring 최신 기능 소개에 대해 알아보았습니다. 총 8가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#TypeScript #Refactoring #CleanCode #BestPractices #ModernPatterns