D: Dependency Inversion Principle(의존성 역전 원칙, DIP)

정의 : 고수준 모듈이 저수준 모듈에 의존해서는 안된다. 둘 다 추상화된 인터페이스에 의존해야한다.

예시 : 리엑트에서 특정 API 서비스에 직접 의존하지 않도록, 추상화된 서비스에 의존하게 설계할 수 있습니다.

 

DIP 위반 예시

function UserProfile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch('/api/user/1')
      .then((res) => res.json())
      .then((data) => setUser(data));
  }, []);

  return (
    <div>
      <h1>{user?.name}</h1>
      <p>{user?.email}</p>
    </div>
  );
}

UserProfile 컴포넌트는 특정 API 호출방식에 의존하고 있습니다.

만약 API가 바뀐다면 이 컴포넌트도 수정을 해야합니다.

이는 DIP를 위반한 사례로 상위 컴포넌트(UserProfile)가 하위 구현(API fetch)에 의존하고 있기 때문입니다.

 

DIP 적용

// UserProfile은 오로지 UI를 렌더링하는 역할만 담당
function UserProfile({ user }) {
  return (
    <div>
      <h1>{user?.name}</h1>
      <p>{user?.email}</p>
    </div>
  );
}

UserProfile 컴포넌트는 

 

function App() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const fetchUserFromAPI = async () => {
      const response = await fetch('/api/user/1');
      const data = await response.json();
      setUser(data);
    };

    fetchUserFromAPI();
  }, []);

  return <UserProfile user={user} />;
}

 

UserProfile은 더이상 구체적인 데이터 처리나 API호출 방식에 의존하지않고 상위 컴포넌트가 제공하는 데이터(Props)를 받아 UI만 랜더링하게 됩니다. (이제보니 이렇게 만들면 ISP도 적용되는 것 같습니다)