ReactJS 디자인 패턴: 강력하고 확장 가능한 구성 요소 작성

ReactJS의 디자인 패턴은 애플리케이션 개발 시 일반적인 문제에 대한 표준화되고 입증된 솔루션을 제공합니다. 이러한 패턴을 사용하면 코드를 더 쉽게 읽고 유지 관리할 수 있을 뿐만 아니라 확장성과 견고성도 향상됩니다. 가장 인기 있는 ReactJS 디자인 패턴 중 일부를 사용법을 보여주는 예와 함께 살펴보겠습니다.

1. 컨테이너 및 프리젠테이션 구성 요소 패턴

컨테이너 및 프리젠테이션 패턴은 구성 요소를 두 가지 범주로 구분합니다.

• 프레젠테이션 구성 요소: 사물이 어떻게 보이는지에 중점을 둡니다(UI).
• 컨테이너 구성 요소: 작동 방식(로직 및 상태 관리)에 중점을 둡니다.

이렇게 분리하면 재사용성이 향상되고 테스트가 쉬워지며 코드가 더욱 깔끔해집니다.

예: 프레젠테이션 및 컨테이너 구성 요소

// Presentational Component: Displaying User List (UserList.js)
import React from 'react';

const UserList = ({ users }) => (
  <ul>
    {users.map((user) => (
      <li key={user.id}>{user.name}</li>
    ))}
  </ul>
);

export default UserList;

// Container Component: Fetching User Data (UserContainer.js)
import React, { useState, useEffect } from 'react';
import UserList from './UserList';

const UserContainer = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchUsers = async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      const data = await response.json();
      setUsers(data);
    };
    fetchUsers();
  }, []);

  return <UserList users={users} />;
};

export default UserContainer;

여기서 UserList는 사용자를 props로 받는 프리젠테이션 구성 요소이고, UserContainer는 데이터 가져오기 및 상태 관리를 처리합니다.

2. 고차성분(HOC) 패턴

고차 컴포넌트(HOC)는 컴포넌트를 인수로 받아 새 컴포넌트를 반환하는 함수입니다. HOC는 일반적으로 인증, 로깅 또는 구성 요소 동작 향상과 같은 교차 문제에 사용됩니다.

예: 승인을 위한 HOC 생성

// withAuthorization.js (HOC for Authorization)
import React from 'react';

const withAuthorization = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      if (!localStorage.getItem('authToken')) {
        // Redirect to login if not authenticated
        window.location.href = '/login';
      }
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

export default withAuthorization;

// Dashboard.js (Component Wrapped with HOC)
import React from 'react';
import withAuthorization from './withAuthorization';

const Dashboard = () => <h1>Welcome to the Dashboard</h1>;

export default withAuthorization(Dashboard);

대시보드를 withAuthorization으로 래핑하면 인증된 사용자만 액세스할 수 있습니다.

3. 렌더링 소품 패턴

Render Props 패턴에는 값이 함수인 prop을 사용하여 구성 요소 간에 코드를 공유하는 작업이 포함됩니다. 이 패턴은 특정 조건이나 상태에 따른 동적 렌더링에 유용합니다.

예: 마우스 추적을 위해 렌더 속성 사용

// MouseTracker.js (Component with Render Props)
import React, { useState } from 'react';

const MouseTracker = ({ render }) => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    setPosition({ x: event.clientX, y: event.clientY });
  };

  return <div onMouseMove={handleMouseMove}>{render(position)}</div>;
};

export default MouseTracker;

// App.js (Using Render Props)
import React from 'react';
import MouseTracker from './MouseTracker';

const App = () => (
  <MouseTracker
    render={({ x, y }) => (
      <h1>
        Mouse position: ({x}, {y})
      </h1>
    )}
  />
);

export default App;

MouseTracker 구성 요소는 렌더링 소품을 사용하여 마우스 위치 데이터를 모든 구성 요소에 전달하므로 재사용성이 높습니다.

4. 맞춤형 후크 패턴

사용자 정의 후크를 사용하면 여러 구성 요소에서 상태 저장 논리를 캡슐화하고 재사용할 수 있습니다. 이 패턴은 코드 재사용성과 문제의 명확한 분리를 촉진합니다.

예: 데이터 가져오기를 위한 사용자 정의 후크 생성

// useFetch.js (Custom Hook)
import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(url);
      const result = await response.json();
      setData(result);
      setLoading(false);
    };
    fetchData();
  }, [url]);

  return { data, loading };
};

export default useFetch;

// App.js (Using the Custom Hook)
import React from 'react';
import useFetch from './useFetch';

const App = () => {
  const { data, loading } = useFetch('https://jsonplaceholder.typicode.com/posts');

  if (loading) return <div>Loading...</div>;

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

export default App;

useFetch 사용자 정의 후크는 다양한 구성 요소에서 재사용할 수 있는 데이터 가져오기 논리를 캡슐화합니다.

5. 복합 구성 요소 패턴

복합 구성 요소 패턴을 사용하면 구성 요소가 함께 작동하여 상태와 동작을 관리할 수 있습니다. 이 패턴은 탭, 아코디언, 드롭다운과 같은 복잡한 UI 구성요소를 구축하는 데 유용합니다.

예: 복합 구성요소로 탭 작성

// Tabs.js (Parent Component)
import React, { useState } from 'react';

const Tabs = ({ children }) => {
  const [activeIndex, setActiveIndex] = useState(0);

  return React.Children.map(children, (child, index) =>
    React.cloneElement(child, { isActive: index === activeIndex, setActiveIndex, index })
  );
};

const Tab = ({ children, isActive, setActiveIndex, index }) => (
  <button onClick={() => setActiveIndex(index)}>{children}</button>
);

const TabPanel = ({ children, isActive }) => (isActive ? <div>{children}</div> : null);

Tabs.Tab = Tab;
Tabs.TabPanel = TabPanel;

export default Tabs;

// App.js (Using Compound Components)
import React from 'react';
import Tabs from './Tabs';

const App = () => (
  <Tabs>
    <Tabs.Tab>Tab 1</Tabs.Tab>
    <Tabs.Tab>Tab 2</Tabs.Tab>
    <Tabs.TabPanel>Content for Tab 1</Tabs.TabPanel>
    <Tabs.TabPanel>Content for Tab 2</Tabs.TabPanel>
  </Tabs>
);

export default App;

Tabs 구성 요소는 상태를 관리하는 반면 Tab 및 TabPanel 구성 요소는 함께 작동하여 탭 콘텐츠를 표시합니다.

6. 제어된 구성 요소와 제어되지 않은 구성 요소 패턴

제어되는 구성 요소는 React 상태에 의해 완전히 관리되는 반면, 제어되지 않는 구성 요소는 해당 상태에 대해 DOM에 의존합니다. 둘 다 용도가 있지만 일반적으로 일관성과 유지 관리 가능성을 위해 제어된 구성 요소가 선호됩니다.

예: 제어되는 구성 요소와 제어되지 않는 구성 요소

// Controlled Component (TextInputControlled.js)
import React, { useState } from 'react';

const TextInputControlled = () => {
  const [value, setValue] = useState('');

  return (
    <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
  );
};

export default TextInputControlled;

// Uncontrolled Component (TextInputUncontrolled.js)
import React, { useRef } from 'react';

const TextInputUncontrolled = () => {
  const inputRef = useRef();

  const handleClick = () => {
    console.log(inputRef.current.value);
  };

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Log Input Value</button>
    </>
  );
};

export default TextInputUncontrolled;

제어되는 구성요소에서 React는 양식 상태를 완전히 제어하는 ​​반면, 제어되지 않는 구성요소에서는 상태가 DOM 자체에 의해 관리됩니다.

7. 후크 팩토리 패턴

Hooks Factory 패턴에는 여러 상태나 동작을 동적으로 생성하고 관리하는 후크를 생성하여 복잡한 논리를 관리하는 유연한 방법을 제공합니다.

예: Hooks Factory를 사용한 동적 상태 관리

// useDynamicState.js (Hook Factory)
import { useState } from 'react';

const useDynamicState = (initialStates) => {
  const states = {};
  const setters = {};

  initialStates.forEach(([key, initialValue]) => {
    const [state, setState] = useState(initialValue);
    states[key] = state;
    setters[key] = setState;
  });

  return [states, setters];
};

export default useDynamicState;

// App.js (Using the Hooks Factory)
import React from 'react';
import useDynamicState from './useDynamicState';

const App = () => {
  const [states, setters] = useDynamicState([
    ['name', ''],
    ['age', 0],
  ]);

  return (
    <div>
      <input
        type="text"
        value={states.name}
        onChange={(e) => setters

.name(e.target.value)}
      />
      <input
        type="number"
        value={states.age}
        onChange={(e) => setters.age(parseInt(e.target.value))}
      />
      <p>Name: {states.name}</p>
      <p>Age: {states.age}</p>
    </div>
  );
};

export default App;

이 후크 팩토리는 여러 상태를 동적으로 생성 및 관리하여 유연성과 깔끔한 ​​코드를 제공합니다.

결론

이러한 디자인 패턴을 활용하면 더욱 강력하고 확장 가능하며 유지 관리 가능한 React 애플리케이션을 만들 수 있습니다. 이러한 패턴은 모범 사례를 준수하는 깨끗하고 재사용 가능한 코드를 작성하는 데 도움이 되므로 시간이 지남에 따라 애플리케이션을 더 쉽게 개발하고 관리할 수 있습니다.

이러한 패턴에 대해 더 자세히 알아보거나 다른 주제를 살펴보고 싶으신가요?

위 내용은 ReactJS 디자인 패턴: 강력하고 확장 가능한 구성 요소 작성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!