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

1. 컨테이너 및 표현 구성 요소 패턴

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

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

이러한 분리를 통해 재사용성이 향상되고 테스트가 쉬워지며 코드가 더욱 깔끔해집니다.

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

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

const UserList = ({ users }) => (
  

{users.map((user) => (
• {user.name}
))}

// 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 ;
};

export default UserContainer;

여기서 UserList는 사용자를 소품으로 받는 프리젠테이션 구성 요소이고, 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 ;
    }
  };
};

export default withAuthorization;

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

const Dashboard = () => 
Welcome to the Dashboard
;

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 
{render(position)}
;
};

export default MouseTracker;

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

const App = () => (
   (
      

        Mouse position: ({x}, {y})
      
    )}
  />
);

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 
Loading...
;

  return (
    

{data.map((post) => (
• {post.title}
))}

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 }) => (
   setActiveIndex(index)}>{children}
);

const TabPanel = ({ children, isActive }) => (isActive ? 
{children}
 : 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 = () => (
  
    Tab 1
    Tab 2
    Content for Tab 1
    Content for Tab 2
  
);

export default App;

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

6. 제어 및 비제어 구성 요소 패턴

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

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

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

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

  return (
     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 (
    
      
      Log Input Value
    >
  );
};

export default TextInputUncontrolled;

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

7. 후크 팩토리 패턴

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

예: 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 (
    

       setters

.name(e.target.value)}
      />
       setters.age(parseInt(e.target.value))}
      />
      
Name: {states.name}
      
Age: {states.age}
    
  );
};

export default App;

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

결론

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

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