여기서 잠깐!! Boilerplate 코드란?

지난번 게시글에서 소개했던 "카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유 | 카카오페이 기술 블로그"에서 Boilerplate 코드라는 용어가 자주 등장했는데요, 오늘은 이 개념에 대해 조금 더 깊이 알아보려고 합니다.

 

Boilerplate 코드란 무엇인지, 그리고 왜 개발에서 중요한지 React와 Redux의 사례를 통해 쉽게 풀어 설명드릴게요.

함께 알아보며 이해를 넓혀가 봅시다! 😊

---

Boilerplate 코드란?

Boilerplate 코드는 개발을 시작할 때 기본적으로 작성해야 하는 반복적이고 기본적인 코드를 의미합니다.

쉽게 말해, 특정 작업을 수행하기 위해 늘 비슷한 방식으로 작성해야 하는 템플릿 같은 코드예요.

 

예를 들어, 책을 쓸 때 제목, 목차, 페이지 번호 같은 기본적인 요소들을 항상 포함해야 하듯,

프로그램에서도 어떤 기능을 만들기 위해 기본적으로 필요한 코드가 존재합니다.

---

왜 Boilerplate 코드가 필요한가요?

1. 기본 구조 제공: 프로그램이 동작하려면 필수적인 설정이나 구조가 필요하기 때문입니다.
2. 일관성 유지: 모든 개발자들이 비슷한 방식으로 코드를 작성하게 해서 협업을 수월하게 만들어줍니다.

---

Boilerplate 코드의 단점

1. 반복 작업: 같은 패턴을 계속 반복해서 작성해야 하므로 비효율적입니다.
2. 복잡성 증가: 코드량이 많아져서 유지보수가 어려워질 수 있습니다.

---

예를 들어보면...

Redux에서 Boilerplate 코드

Redux를 사용할 때, 상태 관리를 위해 아래와 같은 기본적인 코드들을 작성해야 합니다:

• 액션(Action): 어떤 일이 일어났는지 설명하는 코드
• 리듀서(Reducer): 상태를 업데이트하는 로직
• 스토어(Store): 상태를 관리하는 중앙 저장소

단순히 데이터를 가져오기만 해도 아래처럼 긴 코드가 필요합니다:

// 액션
const FETCH_TODOS = 'FETCH_TODOS';

// 액션 생성자
const fetchTodos = (todos) => ({
  type: FETCH_TODOS,
  payload: todos,
});

// 리듀서
const todosReducer = (state = [], action) => {
  switch (action.type) {
    case FETCH_TODOS:
      return action.payload;
    default:
      return state;
  }
};

// 스토어 생성
import { createStore } from 'redux';

const store = createStore(todosReducer);

// 스토어 사용
console.log('초기 상태:', store.getState());

// 액션 디스패치
store.dispatch(fetchTodos(['Learn Redux', 'Build a Project']));

console.log('업데이트된 상태:', store.getState());

---

설명

1. store 생성:createStore 함수로 리듀서를 기반으로 store를 생성합니다.
2. const store = createStore(todosReducer);
3. store.getState():store의 현재 상태를 확인합니다.
4. store.dispatch(): 액션을 dispatch하여 상태를 업데이트합니다.

---

실행 결과

초기 상태: []
업데이트된 상태: ['Learn Redux', 'Build a Project']

 

이제 store가 추가되어 Redux의 기본 흐름을 완벽히 이해할 수 있습니다.

store는 애플리케이션의 상태를 중앙에서 관리하며,

이를 통해 컴포넌트 간 상태 공유와 동기화를 쉽게 처리할 수 있습니다.

---

Boilerplate 코드를 줄이는 방법

React Query를 사용한 대체 코드:

import { useQuery } from 'react-query';
import axios from 'axios';

// 데이터를 가져오는 함수 (API 호출)
const fetchTodos = async () => {
  const response = await axios.get('/todos');
  return response.data;
};

// React 컴포넌트
const Todos = () => {
  // useQuery로 데이터 가져오기
  const { data: todos, isLoading, error } = useQuery('todos', fetchTodos);

  // 로딩 상태 처리
  if (isLoading) return <p>Loading...</p>;

  // 에러 처리
  if (error) return <p>Error: {error.message}</p>;

  // 데이터 렌더링
  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo}</li>
      ))}
    </ul>
  );
};

export default Todos;

---

Redux와 React Query 비교

주요 매칭

1. fetchTodos 함수:

Redux의 액션 생성자와 비슷한 역할을 합니다. 데이터를 가져오는 함수를 정의하여 useQuery에서 호출합니다.

const fetchTodos = async () => {
  const response = await axios.get('/todos');
  return response.data;
};

2. useQuery:

Redux의 store, reducer, dispatch를 모두 대체합니다. useQuery를 사용하면 데이터를 자동으로 가져오고 상태를 관리할 수 있습니다.

const { data: todos, isLoading, error } = useQuery('todos', fetchTodos);

3. 상태 관리:

Redux에서는 store.getState()로 상태를 확인하지만, React Query는 data를 통해 상태를 자동으로 제공합니다.

단순화된 흐름

• Redux는 상태를 중앙에서 관리하기 위해 액션 생성, 리듀서 작성, 스토어 생성 등의 작업이 필요하지만,
• React Query는 API 호출 함수와 useQuery만으로 동일한 기능을 수행합니다.

---

React Query로 전환된 이점

1. Boilerplate 코드 제거: 액션, 리듀서, 스토어 생성을 모두 생략.

2. 자동 상태 관리: Redux에서 수동으로 상태를 업데이트하고 dispatch해야 하지만, React Query는 데이터 로딩, 에러 처리, 상태 갱신을 자동으로 관리합니다.

3. 비동기 작업 최적화: useQuery는 기본적으로 데이터를 캐싱하고 필요 시 자동으로 새로고침합니다. Redux에서 비슷한 기능을 구현하려면 추가 코드가 필요합니다.

---

실행 결과 비교

Redux:

초기 상태: []
업데이트된 상태: ['Learn Redux', 'Build a Project']

 

React Query: 화면에 <ul>로 렌더링된 리스트:

<ul>
  <li>Learn Redux</li>
  <li>Build a Project</li>
</ul>

---

결론

React Query는 Redux의 복잡한 설정 없이 간단한 API 호출과 상태 관리를 제공합니다.
위 코드처럼 React Query로 전환하면 생산성과 유지보수성이 크게 향상됩니다.