UI 구성 요소에서 비즈니스 논리 분리

많은 프런트 엔드 프레임워크에서 비즈니스 논리는 사용자 인터페이스(UI) 구성 요소 내에 포함될 수 있으므로 특히 애플리케이션이 증가함에 따라 코드를 유지 관리하거나 확장하기가 어렵습니다.

Copilot Chat는 코드를 리팩터링하여 비즈니스 논리를 별도의 서비스나 상태 관리 솔루션으로 추출하는 데 도움이 될 수 있습니다. 이렇게 하면 여러 UI 구성 요소에서 비즈니스 논리를 다시 사용할 수 있습니다. 또한 문제를 구분하고 상호 종속성을 줄여 코드를 더 쉽게 확장할 수 있으며, 비즈니스 논리를 UI 구성 요소와 독립적으로 테스트할 수 있도록 하여 단위 테스트를 간소화합니다.

예제 시나리오

이 JavaScript 코드에서 Counter 구성 요소는 구성 요소에 대한 비즈니스 논리를 구성하고 웹 페이지에서 구성 요소를 사용하기 위한 UI 코드도 정의합니다.

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    if (count >= 10) {
      alert('Count cannot exceed 10');
      return;
    }
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

예시 프롬프트

Use Redux to separate the UI code from the Counter component in this code.

예제 응답

Copilot는 코드를 리팩터링하기 위한 단계별 지침을 제공합니다.

제안된 변경 내용은 상태 관리에 Redux를 사용하도록 Counter 구성 요소를 리팩터링합니다. 여기에는 초기 상태 및 리듀서로 Redux 저장소를 설정하고 증분 작업을 정의하고 Redux 저장소에 연결하도록 Counter 구성 요소를 수정하는 작업이 포함됩니다. 마지막으로 애플리케이션은 Provider 구성 요소에 Redux 저장소를 사용할 수 있도록 Counter 구성 요소로 래핑됩니다. 그러면 UI 논리가 상태 관리와 분리됩니다.

제안된 변경 내용은 코드를 5개의 개별 파일로 구분합니다.

actions.js

export const increment = () => ({
  type: 'INCREMENT'
});

reducer.js

const initialState = {
  count: 0
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      if (state.count >= 10) {
        alert('Count cannot exceed 10');
        return state;
      }
      return {
        ...state,
        count: state.count + 1
      };
    default:
      return state;
  }
};

export default counterReducer;

store.js

import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

counter.js

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment } from './actions';

const Counter = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
    </div>
  );
};

export default Counter;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './counter';

ReactDOM.render(
  <Provider store={store}>
    <Counter />
  </Provider>,
  document.getElementById('root')
);

추가 참고 자료

• "GitHub Copilot의 프롬프트 엔지니어링"
• "GitHub Copilot 사용 모범 사례"