의존성 주입이란?

의존성 주입

• 프론트엔드에서 의존성 주입은 한 컴포넌트나 모듈이 외부에서 필요로 하는 서비스, 객체, 혹은 함수 등의 의존성을 외부에서 주입받는 것을 의미한다. 이는 코드의 유지보수성과 테스트 용이성을 높이는 데 기여한다.
• 간단하게 설명하면, 의존성 주입은 어떤 기능을 사용하려면 그것을 직접 생성하는 것이 아니라, 외부에서 주입받아 사용하는 패턴이다. 이로써 코드의 결합도를 낮추고 재사용성을 증가시킬 수 있다.
• 예를 들어, 프론트엔드에서 데이터를 처리하는 서비스를 사용한다고 가정해보자. 의존성 주입을 사용하면 해당 서비스를 직접 생성하는 대신, 외부에서 주입받아 사용할 수 있다. 이를 통해 코드의 유연성이 증가하고, 특히 유닛 테스트를 수행하기 쉬워진다.
• 의존성 주입은 주로 컴포넌트 간의 의존성이나 서비스 관리에 활용되며, 주로 프레임워크나 라이브러리에서 지원되는 경우가 많다. React에서는 Context API나 외부에서 주입받는 props를 통해 의존성 주입을 구현할 수 있다.

---

예시 1

간단한 숫자 합을 구하는 프로그램이 있다고 가정해보자.

1. 숫자 합을 계산하는 함수:

// sum.js
const sum = (a, b) => a + b;
export default sum;

1. 메인 프로그램:

// main.js
import sum from './sum';

const a = 5;
const b = 10;

const result = sum(a, b);
console.log(`두 숫자의 합은: ${result}`);

여기서 ‘ main.js ‘ 가 ‘ sum.js ’에 의존하고 있다. 이제 이 의존성을 주입을 통해 해결해보자.

1. 의존성 주입을 통한 예제 :

// main.js
const snm = (a, b) => a + b;

const a = 5;
const b = 10;

const result = sum(a, b);
console.log(`두 숫자의 합은 : ${result}`);

여기서 **main.js**는 **sum.js**를 직접 import하지 않고, 함수를 직접 정의했다. 이렇게 하면 외부에서 sum 함수를 주입하여 사용할 수 있다.

---

예시 2

가령, 두 개의 컴포넌트가 있고, 하나는 사용자 이름을 보여주는 UserProfile 이고, 다른 하나는 사용자 정보를 수정하는 UserSettings 이라고 가정해보자.

 

뭔 소리인지는 모르겠지만 일단 알겠다고 하자...

 

1. UserProfile 컴포넌트:

//사용자 이름을 보여주는 컴포넌트

import React from 'react';

const UserProfile = ({ username }) => {
  return (
    <div>
      <h2>사용자 이름: {username}</h2>
    </div>
  );
};

1. UserSettings 컴포넌트:

//사용자 정보를 수정하는 컴포넌

import React from 'react';

const UserSettings = ({ onUpdateUsername }) => {
  return (
    <div>
      <label>새로운 사용자 이름: </label>
      <input type="text" onChange={(e) => onUpdateUsername(e.target.value)} />
    </div>
  );
};

여기서 ‘ UserSettings ‘ 컴포넌트는 onUpdateUsername 함수를 통해 사용자 이름을 업데이트할 수 있도록 하자.

이제 이 두 컴포넌트를 사용하는 ‘ App ‘ 컴포넌트에서 의존성 주입을 통해 연결해보자.

1. App 컴포넌트:

jsxCopy code
import React, { useState } from 'react';
import UserProfile from './UserProfile';
import UserSettings from './UserSettings';

const App = () => {
  const [username, setUsername] = useState('JohnDoe');

  const handleUpdateUsername = (newUsername) => {
    setUsername(newUsername);
  };

  return (
    <div>
      <UserProfile username={username} />
      <UserSettings onUpdateUsername={handleUpdateUsername} />
    </div>
  );
};

이 예시에서는 `UserProfile`과 `UserSettings` 컴포넌트가 `App` 컴포넌트에 종속되어 있다.

`App` 에서 `UserSettings`를 통해 제공하는 함수를 `UserProfile`에 주입함으로써, 사용자 이름을 업데이트하는 동작이 구현된다.