Modal을 만들 때 상태를 이용하는 법과 forwardRef, useImperativeHandle 을 사용하는 것의 차

 

상태를 이용한 접근 방식(선언형)

1. 상태 기반 제어:

부모 컴포넌트에서 상태를 관리하고, 이를 자식 컴포넌트에 props로 전달하여 모달을 열고 닫습니다.
상태 변경에 따라 컴포넌트가 다시 렌더링됩니다.

2. 간단한 데이터 흐름:
상태를 통해 데이터가 부모에서 자식으로 흐르기 때문에 데이터 흐름이 명확합니다.

3. 리렌더링:
상태 변경 시 컴포넌트가 리렌더링되므로, 성능에 영향을 미칠 수 있습니다.

forwardRef와 useImperativeHandle을 이용한 접근 방식
1. 명령형 제어:
부모 컴포넌트가 자식 컴포넌트의 특정 메서드를 호출하여 동작을 제어합니다.
상태 변경 없이 직접적으로 자식 컴포넌트의 메서드를 호출합니다.

2. 캡슐화:
자식 컴포넌트의 내부 구현을 부모 컴포넌트에 노출하지 않고, 필요한 메서드만 노출합니다.
자식 컴포넌트의 내부 상태나 DOM 요소에 직접 접근할 수 있습니다.

성능:
직접적인 돔 도작으로 상태 변경 없이 메서드를 호출하므로, 불필요한 리렌더링을 피할 수 있습니다.

 

- 상태 기반 접근 방식은 데이터 흐름이 명확하고 간단하지만, 상태 변경 시 리렌더링이 발생합니다.

 

- forwardRef와 useImperativeHandle을 이용한 접근 방식은 명령형으로 제어할 수 있으며, 불필요한 리렌더링을 피할 수 있습니다. 또한, 자식 컴포넌트의 내부 구현을 캡슐화할 수 있습니다.

 

상황에 따라 적절한 방법을 선택하면 됩니다. 예를 들어, 모달의 열기/닫기와 같은 단순한 동작은 상태 기반 접근 방식이 더 직관적일 수 있지만, 복잡한 동작이나 성능 최적화가 필요한 경우 forwardRef와 useImperativeHandle을 사용하는 것이 더 적합할 수 있습니다.

 

 

리액트에서는 선언적 방식을 더 추천하잖아 근데 이 모달에서는 선언적 방식으로 하게되면 불필요한 리랜더링이 일어나는 것 같은데 너는 어떤 방식을 더 추천해

 

리액트에서는 일반적으로 선언적 방식을 추천하지만, 모달과 같은 특정 컴포넌트에서는 성능 최적화가 필요할 때 명령형 방식이 유리할 수 있습니다. 두 접근 방식의 장단점을 고려하여 상황에 맞게 선택하는 것이 중요합니다.

선언적 방식의 장점과 최적화 방법

장점:

 

• 가독성 및 유지보수성: 상태 기반으로 UI를 관리하기 때문에 코드가 직관적이고 이해하기 쉽습니다.

 

 

 

• React의 철학에 부합: 상태가 변할 때 UI가 자동으로 업데이트되므로 예측 가능성이 높습니다.

 

 

최적화 방법:

 

• React.memo 사용: 불필요한 리렌더링을 방지하기 위해 React.memo를 사용하여 컴포넌트를 메모이제이션할 수 있습니다.

 

 

 

• useCallback 및 useMemo 활용: 함수와 값을 메모이제이션하여 자식 컴포넌트에 전달되는 프롭스가 변경되지 않도록 합니다.

 

 

 

• 상태 분리: 모달의 열림/닫힘 상태와 다른 상태를 분리하여 리렌더링 범위를 최소화할 수 있습니다.

import React, { useState, useCallback } from 'react';
import Modal from './components/Modal';

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = useCallback(() => setIsModalOpen(true), []);
  const closeModal = useCallback(() => setIsModalOpen(false), []);

  return (
    <div>
      <button onClick={openModal}>모달 열기</button>
      <Modal isOpen={isModalOpen} onClose={closeModal}>
        <p>모달 내용</p>
      </Modal>
    </div>
  );
};

export default App;

 

추천

상황에 따라 선택하세요:

 

• 복잡한 상태 관리이 필요 없는 간단한 모달: 선언적 방식을 사용하고, React.memo와 같은 최적화 기법을 적용하여 성능을 유지하세요.

 

 

 

• 성능이 매우 중요한 경우 또는 직접적인 제어가 필요한 경우: 명령형 방식을 사용하여 불필요한 리렌더링을 피하고 세밀한 제어를 할 수 있습니다.

 

 

결론적으로, 대부분의 경우 선언적 방식을 사용하는 것이 유지보수성과 가독성 측면에서 더 유리합니다. 하지만 실제로 성능 문제가 발생하거나 특정한 제어가 필요할 때는 명령형 방식을 고려하는 것이 좋습니다. 최적화를 위해서는 먼저 선언적 방식을 시도하고, 필요에 따라 명령형 방식으로 전환하는 접근이 권장됩니다.