{"meta":{"title":"UI 구성 요소에서 비즈니스 논리 분리","intro":"Copilot Chat 에서는 비즈니스 논리를 사용자 인터페이스 코드와 분리하여 애플리케이션을 더 쉽게 유지 관리하고 크기를 조정할 수 있습니다.","product":"GitHub Copilot","breadcrumbs":[{"href":"/ko/copilot","title":"GitHub Copilot"},{"href":"/ko/copilot/tutorials","title":"자습서"},{"href":"/ko/copilot/tutorials/copilot-cookbook","title":"GitHub Copilot 활용 안내서"},{"href":"/ko/copilot/tutorials/copilot-cookbook/refactor-code","title":"코드 리팩터링"},{"href":"/ko/copilot/tutorials/copilot-cookbook/refactor-code/decouple-business-logic","title":"비즈니스 논리 분리"}],"documentType":"article"},"body":"# UI 구성 요소에서 비즈니스 논리 분리\n\nCopilot Chat 에서는 비즈니스 논리를 사용자 인터페이스 코드와 분리하여 애플리케이션을 더 쉽게 유지 관리하고 크기를 조정할 수 있습니다.\n\n많은 프런트 엔드 프레임워크에서 비즈니스 논리는 사용자 인터페이스(UI) 구성 요소 내에 포함될 수 있으므로 특히 애플리케이션이 증가함에 따라 코드를 유지 관리하거나 확장하기가 어렵습니다.\n\nCopilot Chat 는 코드를 리팩터링하여 비즈니스 논리를 별도의 서비스 또는 상태 관리 솔루션으로 추출하는 데 도움이 될 수 있습니다. 이렇게 하면 여러 UI 구성 요소에서 비즈니스 논리를 다시 사용할 수 있습니다. 또한 문제를 구분하고 상호 종속성을 줄여 코드를 더 쉽게 확장할 수 있으며, 비즈니스 논리를 UI 구성 요소와 독립적으로 테스트할 수 있도록 하여 단위 테스트를 간소화합니다.\n\n## 예제 시나리오\n\n이 JavaScript 코드에서 `Counter` 구성 요소는 구성 요소에 대한 비즈니스 논리를 구성하고 웹 페이지에서 구성 요소를 사용하기 위한 UI 코드도 정의합니다.\n\n```javascript id=counter-component\nimport React, { useState } from 'react';\n\nconst Counter = () => {\n  const [count, setCount] = useState(0);\n\n  const increment = () => {\n    if (count >= 10) {\n      alert('Count cannot exceed 10');\n      return;\n    }\n    setCount(count + 1);\n  };\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={increment}>Increment</button>\n    </div>\n  );\n};\n\nexport default Counter;\n```\n\n## 예제 프롬프트\n\n```copilot copy prompt ref=counter-component\nUse Redux to separate the UI code from the Counter component in this code.\n```\n\n## 응답 예제\n\nCopilot 에서는 코드를 리팩터링하기 위한 단계별 지침을 제공합니다.\n\n제안된 변경 내용은 상태 관리에 Redux를 사용하도록 `Counter` 구성 요소를 리팩터링합니다. 여기에는 초기 상태 및 리듀서로 Redux 저장소를 설정하고, 증가 액션을 정의하며, `Counter` 구성 요소가 Redux 저장소에 연결할 수 있도록 수정하는 작업이 포함됩니다. 마지막으로 애플리케이션은 Redux 저장소를 `Provider` 구성 요소에서 사용할 수 있도록 `Counter` 구성 요소로 감쌉니다. 그러면 UI 논리가 상태 관리와 분리됩니다.\n\n제안된 변경 내용은 코드를 5개의 개별 파일로 구분합니다.\n\n> \\[!NOTE]\n> Copilot Chat 응답은 비결정적이므로 여기에 설명된 응답과 다른 응답을 얻을 수 있습니다.\n\n### actions.js\n\n```javascript\nexport const increment = () => ({\n  type: 'INCREMENT'\n});\n```\n\n### reducer.js\n\n```javascript\nconst initialState = {\n  count: 0\n};\n\nconst counterReducer = (state = initialState, action) => {\n  switch (action.type) {\n    case 'INCREMENT':\n      if (state.count >= 10) {\n        alert('Count cannot exceed 10');\n        return state;\n      }\n      return {\n        ...state,\n        count: state.count + 1\n      };\n    default:\n      return state;\n  }\n};\n\nexport default counterReducer;\n```\n\n### store.js\n\n```javascript\nimport { createStore } from 'redux';\nimport counterReducer from './reducer';\n\nconst store = createStore(counterReducer);\n\nexport default store;\n```\n\n### counter.js\n\n```javascript\nimport React from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { increment } from './actions';\n\nconst Counter = () => {\n  const count = useSelector(state => state.count);\n  const dispatch = useDispatch();\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={() => dispatch(increment())}>Increment</button>\n    </div>\n  );\n};\n\nexport default Counter;\n```\n\n### index.js\n\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Provider } from 'react-redux';\nimport store from './store';\nimport Counter from './counter';\n\nReactDOM.render(\n  <Provider store={store}>\n    <Counter />\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## 추가 읽기\n\n* [GitHub Copilot 채팅에 대한 프롬프트 엔지니어링](/ko/copilot/concepts/prompting/prompt-engineering)\n* [GitHub 부필로트 사용에 대한 모범 사례](/ko/copilot/get-started/best-practices)"}