Heim Web-Frontend js-Tutorial SOLID-Prinzipien in React: Der Schlüssel zum Schreiben wartbarer Komponenten

SOLID-Prinzipien in React: Der Schlüssel zum Schreiben wartbarer Komponenten

Sep 29, 2024 am 06:19 AM

SOLID Principles in React: The Key to Writing Maintainable Components

React 애플리케이션이 성장함에 따라 구성 요소가 커지고 유지 관리하기 어려운 코드, 예상치 못한 버그 등 상황이 빠르게 지저분해질 수 있습니다. SOLID 원칙이 유용한 곳이 바로 여기입니다. 원래 객체 지향 프로그래밍을 위해 개발된 이러한 원칙은 깔끔하고 유연하며 확장 가능한 코드를 작성하는 데 도움이 됩니다. 이 기사에서는 각 SOLID 원칙을 분석하고 React에서 이를 사용하여 구성 요소를 체계적으로 유지하고 코드를 더 쉽게 유지 관리하며 앱이 성장할 수 있도록 준비하는 방법을 보여 드리겠습니다.

SOLID는 원래 객체 지향 프로그래밍을 위한 것이지만 React에도 적용할 수 있는 깨끗하고 유지 관리 가능하며 확장 가능한 코드 작성을 목표로 하는 5가지 디자인 원칙을 나타내는 약어입니다.

S: 단일 책임 원칙: 구성 요소에는 하나의 작업 또는 책임이 있어야 합니다.

O: 개방/폐쇄 원칙: 구성 요소는 확장을 위해 열려 있어야 하며 **(쉽게 향상되거나 사용자 정의될 수 있음) **수정을 위해 닫혀 있어야 합니다(핵심 코드에는 변경).

L: Liskov 대체 원칙: 구성 요소는 앱의 동작을 중단하지 않고 하위 구성 요소로 교체 가능해야 합니다.

I: 인터페이스 분리 원칙: 구성 요소는 사용하지 않는 기능에 종속되도록 강요해서는 안 됩니다.

D: 종속성 반전 원칙: 구성 요소는 구체적인 구현이 아닌 추상화에 의존해야 합니다.

단일 책임 원칙(SRP)

이렇게 생각해 보세요. 걷기와 같은 한 가지 작업만 수행할 수 있는 장난감 로봇이 있다고 상상해 보세요. 말하기와 같은 두 번째 작업을 요청하면 걷는 데 집중해야 하기 때문에 혼란스러워집니다! 다른 직업을 원한다면 두 번째 로봇을 구입하세요.

React에서 컴포넌트는 한 가지 작업만 수행해야 합니다. 데이터 가져오기, 양식 입력 처리, UI 표시 등 너무 많은 작업을 한꺼번에 수행하면 지저분해지고 관리가 어려워집니다.

const UserCard = () => {
  const [user, setUser] = useState(null);

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

  return user ? ( <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div> ) : <p>Loading...</p>;
};
Nach dem Login kopieren

여기서 UserCard는 데이터 가져오기와 UI 렌더링을 모두 담당하며, 이는 단일 책임 원칙을 위반합니다.

const useFetchUser = (fetchUser) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser().then(setUser);
  }, [fetchUser]);

  return user;
};

const UserCard = ({ fetchUser }) => {
  const user = useFetchUser(fetchUser);

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

Nach dem Login kopieren

여기서 데이터 가져오기 로직은 사용자 정의 후크(useFetchUser)로 이동하는 반면 UserCard는 UI 렌더링 및 SRP 유지에만 집중합니다.

개방형/폐쇄형 원리(OCP)

비디오 게임 캐릭터를 생각해 보세요. 핵심 능력(수정)을 변경하지 않고도 캐릭터에 새로운 기술(확장)을 추가할 수 있습니다. 이것이 바로 OCP의 목적입니다. 이미 존재하는 코드를 변경하지 않고도 코드를 확장하고 조정할 수 있도록 하는 것입니다.

const Alert = ({ type, message }) => {
  if (type === 'success') {
    return <div className="alert-success">{message}</div>;
  }
  if (type === 'error') {
    return <div className="alert-error">{message}</div>;
  }
  return <div>{message}</div>;
};
Nach dem Login kopieren

여기서 새로운 경고 유형이 필요할 때마다 OCP를 손상시키는 경고 구성 요소를 수정해야 합니다. 구성 요소에 조건부 렌더링을 추가하거나 케이스 렌더링을 전환할 때마다 해당 구성 요소의 유지 관리가 어려워지므로 기능에 더 많은 조건을 추가하고 OCP를 손상시키는 구성 요소 핵심 코드를 수정해야 합니다.

const Alert = ({ className, message }) => (
  <div className={className}>{message}</div>
);

const SuccessAlert = ({ message }) => (
  <Alert className="alert-success" message={message} />
);

const ErrorAlert = ({ message }) => (
  <Alert className="alert-error" message={message} />
);
Nach dem Login kopieren

이제 Alert 구성 요소는 확장을 위해 열려 있습니다(SuccessAlert, ErrorAlert 등을 추가하여). 하지만 핵심 Alert 구성 요소를 건드릴 필요가 없기 때문에 수정을 위해 닫혀 있습니다. 새로운 경고 유형을 추가합니다.

OCP를 원하시나요? 상속보다 구성을 선호

Liskov 대체 원칙(LSP)

휴대폰이 있는데 새 스마트폰을 갖게 되었다고 상상해 보세요. 일반 전화기에서 했던 것처럼 스마트폰에서도 전화를 걸기를 기대합니다. 스마트폰이 전화를 못 걸면 나쁜 대체품이겠죠? 이것이 바로 LSP의 목적입니다. 새 구성 요소나 하위 구성 요소는 문제를 일으키지 않고 원본처럼 작동해야 합니다.

const Button = ({ onClick, children }) => (
  <button onClick={onClick}>{children}</button>
);

const IconButton = ({ onClick, icon }) => (
  <Button onClick={onClick}>
    <i className={icon} />
  </Button>
);
Nach dem Login kopieren

여기서 Button을 IconButton으로 바꾸면 레이블이 손실되어 동작과 기대가 깨집니다.

const Button = ({ onClick, children }) => (
  <button onClick={onClick}>{children}</button>
);

const IconButton = ({ onClick, icon, label }) => (
  <Button onClick={onClick}>
    <i className={icon} /> {label}
  </Button>
);

// IconButton now behaves like Button, supporting both icon and label

Nach dem Login kopieren

이제 IconButton은 Button의 동작을 적절하게 확장하여 아이콘과 라벨을 모두 지원하므로 기능을 중단하지 않고 교체할 수 있습니다. 이는 자식(IconButton)이 부모(Button)를 아무런 문제 없이 대체할 수 있기 때문에 Liskov 대체 원칙을 따릅니다!

B 구성 요소가 A 구성 요소를 확장하는 경우 A 구성 요소를 사용하는 모든 위치에서 B 구성 요소를 사용할 수 있습니다.

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

리모컨을 사용하여 TV를 시청한다고 상상해 보세요. 전원, 볼륨, 채널과 같은 몇 개의 버튼만 있으면 됩니다. 리모컨에 DVD 플레이어, 라디오, 조명 등 불필요한 버튼이 너무 많다면 사용하기 불편할 것입니다.

이를 사용하는 구성 요소에 소품이 모두 필요하지 않더라도 많은 소품을 사용하는 데이터 테이블 구성 요소가 있다고 가정해 보겠습니다.

const DataTable = ({ data, sortable, filterable, exportable }) => (
  <div>
    {/* Table rendering */}
    {sortable && <button>Sort</button>}
    {filterable && <input placeholder="Filter" />}
    {exportable && <button>Export</button>}
  </div>
);
Nach dem Login kopieren

This component forces all consumers to think about sorting, filtering, and exporting—even if they only want a simple table.

You can split the functionality into smaller components based on what’s needed.

const DataTable = ({ data }) => (
  <div>
    {/* Table rendering */}
  </div>
);

const SortableTable = ({ data }) => (
  <div>
    <DataTable data={data} />
    <button>Sort</button>
  </div>
);

const FilterableTable = ({ data }) => (
  <div>
    <DataTable data={data} />
    <input placeholder="Filter" />
  </div>
);
Nach dem Login kopieren

Now, each table only includes the functionality that’s needed, and you’re not forcing unnecessary props everywhere. This follows ISP, where components only depend on the parts they need.

Dependency Inversion Principle (DIP)

Imagine you're building with LEGO blocks. You have a robot built with specific pieces. But what if you want to swap out its arms or legs? You shouldn't have to rebuild the whole thing—just swap out the parts. The Dependency Inversion Principle (DIP) is like this: your robot (high-level) doesn't depend on specific parts (low-level); it depends on pieces that you can change easily.

const UserComponent = () => {
  useEffect(() => {
    fetch('/api/user').then(...);
  }, []);
  return <div>...</div>;
};
Nach dem Login kopieren

This directly depends on fetch—you can’t swap it easily.

const UserComponent = ({ fetchUser }) => {
  useEffect(() => {
    fetchUser().then(...);
  }, [fetchUser]);
  return <div>...</div>;
};
Nach dem Login kopieren

Now, the fetchUser function is passed in, and you can easily swap it with another implementation (e.g., mock API, or another data source), keeping everything flexible and testable.

Final Thoughts

Understanding and applying SOLID principles in React can drastically improve the quality of your code. These principles—Single Responsibility, Open/Closed, Liskov Substitution, Interface Segregation, and Dependency Inversion—help you write components that are more modular, flexible, and easier to maintain. By breaking down responsibilities, keeping code extensible, and making sure each part of your app interacts in predictable ways, you can create React applications that scale more easily and are simpler to debug. In short, SOLID principles lead to cleaner and more maintainable codebases.

Das obige ist der detaillierte Inhalt vonSOLID-Prinzipien in React: Der Schlüssel zum Schreiben wartbarer Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

<🎜>: Bubble Gum Simulator Infinity - So erhalten und verwenden Sie Royal Keys
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusionssystem, erklärt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Flüstern des Hexenbaum
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Java-Tutorial
1670
14
PHP-Tutorial
1274
29
C#-Tutorial
1256
24
Python vs. JavaScript: Die Lernkurve und Benutzerfreundlichkeit Python vs. JavaScript: Die Lernkurve und Benutzerfreundlichkeit Apr 16, 2025 am 12:12 AM

Python eignet sich besser für Anfänger mit einer reibungslosen Lernkurve und einer kurzen Syntax. JavaScript ist für die Front-End-Entwicklung mit einer steilen Lernkurve und einer flexiblen Syntax geeignet. 1. Python-Syntax ist intuitiv und für die Entwicklung von Datenwissenschaften und Back-End-Entwicklung geeignet. 2. JavaScript ist flexibel und in Front-End- und serverseitiger Programmierung weit verbreitet.

Von C/C nach JavaScript: Wie alles funktioniert Von C/C nach JavaScript: Wie alles funktioniert Apr 14, 2025 am 12:05 AM

Die Verschiebung von C/C zu JavaScript erfordert die Anpassung an dynamische Typisierung, Müllsammlung und asynchrone Programmierung. 1) C/C ist eine statisch typisierte Sprache, die eine manuelle Speicherverwaltung erfordert, während JavaScript dynamisch eingegeben und die Müllsammlung automatisch verarbeitet wird. 2) C/C muss in den Maschinencode kompiliert werden, während JavaScript eine interpretierte Sprache ist. 3) JavaScript führt Konzepte wie Verschlüsse, Prototypketten und Versprechen ein, die die Flexibilität und asynchrone Programmierfunktionen verbessern.

JavaScript und das Web: Kernfunktionalität und Anwendungsfälle JavaScript und das Web: Kernfunktionalität und Anwendungsfälle Apr 18, 2025 am 12:19 AM

Zu den Hauptanwendungen von JavaScript in der Webentwicklung gehören die Interaktion der Clients, die Formüberprüfung und die asynchrone Kommunikation. 1) Dynamisches Inhaltsaktualisierung und Benutzerinteraktion durch DOM -Operationen; 2) Die Kundenüberprüfung erfolgt vor dem Einreichung von Daten, um die Benutzererfahrung zu verbessern. 3) Die Aktualisierung der Kommunikation mit dem Server wird durch AJAX -Technologie erreicht.

JavaScript in Aktion: Beispiele und Projekte in realer Welt JavaScript in Aktion: Beispiele und Projekte in realer Welt Apr 19, 2025 am 12:13 AM

Die Anwendung von JavaScript in der realen Welt umfasst Front-End- und Back-End-Entwicklung. 1) Zeigen Sie Front-End-Anwendungen an, indem Sie eine TODO-Listanwendung erstellen, die DOM-Operationen und Ereignisverarbeitung umfasst. 2) Erstellen Sie RESTFUFFUPI über Node.js und express, um Back-End-Anwendungen zu demonstrieren.

Verständnis der JavaScript -Engine: Implementierungsdetails Verständnis der JavaScript -Engine: Implementierungsdetails Apr 17, 2025 am 12:05 AM

Es ist für Entwickler wichtig, zu verstehen, wie die JavaScript -Engine intern funktioniert, da sie effizientere Code schreibt und Leistungs Engpässe und Optimierungsstrategien verstehen kann. 1) Der Workflow der Engine umfasst drei Phasen: Parsen, Kompilieren und Ausführung; 2) Während des Ausführungsprozesses führt die Engine dynamische Optimierung durch, wie z. B. Inline -Cache und versteckte Klassen. 3) Zu Best Practices gehören die Vermeidung globaler Variablen, die Optimierung von Schleifen, die Verwendung von const und lass und die Vermeidung übermäßiger Verwendung von Schließungen.

Python gegen JavaScript: Community, Bibliotheken und Ressourcen Python gegen JavaScript: Community, Bibliotheken und Ressourcen Apr 15, 2025 am 12:16 AM

Python und JavaScript haben ihre eigenen Vor- und Nachteile in Bezug auf Gemeinschaft, Bibliotheken und Ressourcen. 1) Die Python-Community ist freundlich und für Anfänger geeignet, aber die Front-End-Entwicklungsressourcen sind nicht so reich wie JavaScript. 2) Python ist leistungsstark in Bibliotheken für Datenwissenschaft und maschinelles Lernen, während JavaScript in Bibliotheken und Front-End-Entwicklungsbibliotheken und Frameworks besser ist. 3) Beide haben reichhaltige Lernressourcen, aber Python eignet sich zum Beginn der offiziellen Dokumente, während JavaScript mit Mdnwebdocs besser ist. Die Wahl sollte auf Projektbedürfnissen und persönlichen Interessen beruhen.

Python vs. JavaScript: Entwicklungsumgebungen und Tools Python vs. JavaScript: Entwicklungsumgebungen und Tools Apr 26, 2025 am 12:09 AM

Sowohl Python als auch JavaScripts Entscheidungen in Entwicklungsumgebungen sind wichtig. 1) Die Entwicklungsumgebung von Python umfasst Pycharm, Jupyternotebook und Anaconda, die für Datenwissenschaft und schnelles Prototyping geeignet sind. 2) Die Entwicklungsumgebung von JavaScript umfasst Node.JS, VSCODE und WebPack, die für die Entwicklung von Front-End- und Back-End-Entwicklung geeignet sind. Durch die Auswahl der richtigen Tools nach den Projektbedürfnissen kann die Entwicklung der Entwicklung und die Erfolgsquote der Projekte verbessert werden.

Die Rolle von C/C bei JavaScript -Dolmetschern und Compilern Die Rolle von C/C bei JavaScript -Dolmetschern und Compilern Apr 20, 2025 am 12:01 AM

C und C spielen eine wichtige Rolle in der JavaScript -Engine, die hauptsächlich zur Implementierung von Dolmetschern und JIT -Compilern verwendet wird. 1) C wird verwendet, um JavaScript -Quellcode zu analysieren und einen abstrakten Syntaxbaum zu generieren. 2) C ist für die Generierung und Ausführung von Bytecode verantwortlich. 3) C implementiert den JIT-Compiler, optimiert und kompiliert Hot-Spot-Code zur Laufzeit und verbessert die Ausführungseffizienz von JavaScript erheblich.

See all articles