React와 Redux를 사용하여 공통 팝업 컴포넌트를 구현

Redux에서 함수를 직접 저장하는 것을 추천하지 않는 것은 맞습니다. 대신, 함수를 저장하지 않고도 원하는 기능을 구현할 수 있는 방법들이 있습니다. 이러한 상황에서 공통 팝업 컴포넌트를 구현하려면 다음과 같은 방법을 사용할 수 있습니다. 1. Callback 함수를 prop으로 전달하기 팝업 컴포넌트에 callback 함수를 prop으로 전달하고, 팝업에서 버튼을 누르면 이 함수를 실행할 수 있도록 합니다. 이렇게 하면 팝업 외부에서 원하는 기능을 실행하게끔 할 수 있습니다. 2. 커스텀 이벤트 사용하기 React 컴포넌트에서 커스텀 이벤트를 사용하여 상위 컴포넌트에게 이벤트를 전달할 수도 있습니다. 팝업에서 버튼을 누르면 상위 컴포넌트에서 원하는 메소드를 실행할 수 있게 됩니다. 위의 두 가지 방법 중 하나를 사용하여 팝업에서 버튼을 누를 때 원하는 기능을 실행할 수 있도록 구현할 수 있습니다. 이를 통해 Redux에서 함수를 직접 저장하지 않아도 되며, 코드를 깔끔하게 유지할 수 있습니다. ----- ✅ Chat GPT의 답변을 평가해 주세요! - 답변 내용이 올바른지, 틀린 내용은 없는지 댓글로 작성해 주세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
// 1. Callback 함수를 prop으로 전달하기

// ParentComponent.js
function ParentComponent() {
  const handlePopupClose = () => {
    // 팝업을 닫는 이벤트 외에 다른 메소드도 여기서 실행
  };

  return <Popup onClose={handlePopupClose} />;
}

// Popup.js
function Popup({ onClose }) {
  const handleButtonClick = () => {
    // 팝업 닫기 이벤트 실행
    onClose();
  };

  return (
    <div>
      {/* 팝업 내용 */}
      <button onClick={handleButtonClick}>Close</button>
    </div>
  );
}


//2.  커스텀 이벤트 사용하기

// ParentComponent.js
class ParentComponent extends React.Component {
  componentDidMount() {
    window.addEventListener("popupClose", this.handlePopupClose);
  }

  componentWillUnmount() {
    window.removeEventListener("popupClose", this.handlePopupClose);
  }

  handlePopupClose = () => {
    // 팝업을 닫는 이벤트 외에 다른 메소드도 여기서 실행
  };

  render() {
    return <Popup />;
  }
}

// Popup.js
class Popup extends React.Component {
  handleButtonClick = () => {
    // 팝업 닫기 이벤트 실행
    const event = new CustomEvent("popupClose");
    window.dispatchEvent(event);
  };

  render() {
    return (
      <div>
        {/* 팝업 내용 */}
        <button onClick={this.handleButtonClick}>Close</button>
      </div>
    );
  }
}