쉬운 코딩 예제를 통해 SOLID 설계 원리 이해하기-JS 튜토리얼-php.cn

쉬운 코딩 예제를 통해 SOLID 설계 원리 이해하기

WBOY

풀어 주다： 2024-07-17 04:58:16

원래의

201명이 탐색했습니다.

Understanding SOLID design principles with easy coding examples

이 글에서는 각 개념을 쉽게 이해할 수 있도록 간단한 코드 예제와 함께 SOLID 디자인 원칙에 대한 명확하고 간결한 개요를 제공합니다.

SOLID는 소프트웨어 설계를 더욱 이해하기 쉽고 유연하며 유지 관리하기 쉽게 만들기 위한 5가지 설계 원칙 세트입니다.

S — 단일 책임 원칙(SRP)

클래스를 변경해야 하는 이유는 단 하나여야 합니다. 즉, 클래스에는 하나의 임무나 책임만 있어야 합니다.

이 원칙은 UI의 한 측면에 대한 변경이나 업데이트가 관련 없는 부분에 실수로 영향을 미치지 않도록 집중적인 접근 방식을 장려합니다.

// UserProfile.tsx
import React from 'react';

interface UserProfileProps {
  username: string;
  email: string;
}

const UserProfile: React.FC<UserProfileProps> = ({ username, email }) => {
  return (
    <div>
      <h2>{username}</h2>
      <p>{email}</p>
    </div>
  );
};

export default UserProfile;

로그인 후 복사

여기서 UserProfile은 사용자 정보 표시만 담당합니다.

O — 개방-폐쇄 원칙(OCP)

소프트웨어 엔터티는 확장을 위해 열려 있어야 하지만 수정을 위해 닫혀 있어야 합니다.

이 접근 방식을 사용하면 핵심 구성 요소가 안정적이고 변경되지 않고 유지되므로 새로운 기능을 추가할 때 의도하지 않은 부작용이 발생할 위험이 줄어듭니다.

// Alert.tsx
import React from 'react';

interface AlertProps {
  message: string;
}

const Alert: React.FC<AlertProps> = ({ message }) => {
  return <div className="alert">{message}</div>;
};

export default Alert;

// SuccessAlert.tsx
import React from 'react';
import Alert from './Alert';

const SuccessAlert: React.FC<{ message: string }> = ({ message }) => {
  return <Alert message={`Success: ${message}`} />;
};

export default SuccessAlert;

로그인 후 복사

원래 경고 구성 요소를 수정하지 않고도 SuccessAlert를 통해 경고를 확장할 수 있습니다.

L - 리스코프 대체 원리(LSP)

슈퍼클래스의 객체는 프로그램의 정확성에 영향을 주지 않고 서브클래스의 객체로 대체 가능해야 합니다.

간단히 말하면 기본 구성 요소나 모듈이 있는 경우 예기치 않은 문제를 일으키지 않고 기본 구성 요소 대신 파생 구성 요소를 사용할 수 있어야 합니다.

// BaseButton.tsx
import React from 'react';

interface BaseButtonProps {
  onClick: () => void;
  label: string;
}

const BaseButton: React.FC<BaseButtonProps> = ({ onClick, label }) => {
  return <button onClick={onClick}>{label}</button>;
};

export default BaseButton;

// IconButton.tsx
import React from 'react';
import BaseButton from './BaseButton';

interface IconButtonProps extends BaseButtonProps {
  icon: string;
}

const IconButton: React.FC<IconButtonProps> = ({ onClick, label, icon }) => {
  return (
    <BaseButton onClick={onClick} label={<span><i className={icon}></i> {label}</span>} />
  );
};

export default IconButton;

로그인 후 복사

IconButton은 애플리케이션의 정확성에 영향을 주지 않고 BaseButton 어디에서나 사용할 수 있습니다.

I — ISP(인터페이스 분리 원칙)

어떠한 클라이언트도 자신이 사용하지 않는 방법에 의존하도록 강요해서는 안 됩니다. 이는 특정 요구에 맞는 특정 인터페이스를 생성하는 것을 의미합니다.

즉, 하나의 큰 인터페이스를 만드는 대신 개별 구성 요소에 맞게 더 작고 집중된 인터페이스로 세분화합니다.

// interfaces.ts
export interface Flyable {
  fly(): void;
}

export interface Swimmable {
  swim(): void;
}

// Bird.ts
import { Flyable } from './interfaces';

class Bird implements Flyable {
  fly() {
    console.log('Bird is flying');
  }
}

// Fish.ts
import { Swimmable } from './interfaces';

class Fish implements Swimmable {
  swim() {
    console.log('Fish is swimming');
  }
}

로그인 후 복사

클래스가 필요한 것만 구현하도록 별도의 Flyable 및 Swimmable 인터페이스가 생성되었습니다.

D - 종속성 반전 원리(DIP)

상위 수준 모듈은 하위 수준 모듈이 아닌 추상화에 의존해야 합니다. 둘 다 추상화에 의존해야 합니다.

간단히 말하면 구성 요소가 서로 직접적으로 의존하는 대신 인터페이스나 추상 클래스에 의존하므로 코드가 변경 사항에 더 잘 적응할 수 있습니다.

// Logger.ts
export interface Logger {
  log(message: string): void;
}

export class ConsoleLogger implements Logger {
  log(message: string) {
    console.log(message);
  }
}

// UserService.ts
import { Logger } from './Logger';

class UserService {
  constructor(private logger: Logger) {}

  createUser(username: string) {
    this.logger.log(`User created: ${username}`);
  }
}

// App.ts
import { UserService } from './UserService';
import { ConsoleLogger } from './Logger';

const logger = new ConsoleLogger();
const userService = new UserService(logger);

userService.createUser('JohnDoe');

로그인 후 복사

여기서 UserService는 Logger 추상화에 의존하므로 UserService를 변경하지 않고도 로깅 메커니즘을 유연하게 변경할 수 있습니다.

이러한 SOLID 원칙은 강력한 프런트엔드 및 백엔드 애플리케이션 개발에 필수적인 유지 관리, 확장 및 리팩터링이 쉬운 소프트웨어를 만드는 데 도움이 됩니다.

위 내용은 쉬운 코딩 예제를 통해 SOLID 설계 원리 이해하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!