ReactJS: 모달 표시 및 재렌더링
ReactJS 애플리케이션에서 모달을 표시하거나 숨기는 데 어려움을 겪고 계십니까? 모달을 연다면 메인 페이지가 계속해서 재렌더링되어 성능 문제가 발생하나요? 이 블로그 포스트에서는 ReactJS에서 모달을 처리하는 최상의 방법과 불필요한 재렌더링을 방지하는 방법을 알아보겠습니다.
문제: 모달 연다고 재렌더링
먼저 문제를 이해하는 것으로 시작하겠습니다. ReactJS 애플리케이션에서 여러 사진을 표시하는 메인 페이지가 있습니다. showModal 및 modalPhoto 속성을 포함한 상태를 설정했습니다.
export default class Main extends TrackerReact(Component) {
constructor(props) {
super(props);
this.state = {
showModal: false,
modalPhoto: {},
};
// 메소드 바인딩
this.close = this.close.bind(this);
this.open = this.open.bind(this);
}
close() {
this.setState({ showModal: false });
}
open(e) {
this.setState({ modalPhoto: e });
this.setState({ showModal: true });
}
}
showModal이 true로 설정되면, 모달은 Bootstrap React 모달 컴포넌트에 show 속성을 전달하여 렌더링됩니다.
<Modal
show={this.props.show}
>
// ...메인 state.modalPhoto에서 modalPhoto 로드
</Modal>
문제는 모달이 열릴 때 메인 상태가 변경되어 전체 메인 페이지를 재렌더링하는 것입니다. 이 동작은 메인 페이지에 복잡한 컴포넌트나 대량의 데이터가 있는 경우 성능에 영향을 줄 수 있습니다.
해결책: 불필요한 재렌더링 방지
불필요한 재렌더링을 방지하는 가장 효과적인 해결책은 모달 상태를 메인 컴포넌트가 아닌 별도의 컴포넌트에서 관리하는 것입니다. 이렇게 하면 모달 상태의 변경이 메인 페이지의 재렌더링을 트리거하지 않습니다.
Dan Abramov은 유사한 시나리오에서 Redux 상태를 사용하여 모달을 처리하는 방법에 대한 통찰력 있는 답변을 스택 오버플로우에 제공했습니다. 그의 접근 방식을 참고하여 해결책을 구현할 수 있습니다. (출처)
마무리
ReactJS에서 모달을 작업할 때 성능을 우선시하고 불필요한 재렌더링을 방지하는 것이 중요합니다. 모달 상태를 별도의 컴포넌트에서 관리함으로써 메인 페이지의 재렌더링을 제한하고 애플리케이션의 응답성을 향상시킬 수 있습니다.
모달 기능을 구현할 때 해당 애플리케이션의 특정 요구사항과 아키텍처를 고려해야 합니다. 최적의 해결책을 찾아 효율적이고 유지보수 가능한 솔루션을 구현하여 원활한 사용자 경험을 보장하도록 노력해야 합니다.
이 블로그 포스트가 ReactJS에서 모달과 재렌더링을 처리하는 데 유용한 통찰과 안내를 제공한 것으로 희망합니다. 즐거운 코딩하세요!
참고 자료 :
https://stackoverflow.com/questions/43218368/reactjs-showing-modals-and-rerendering
같은 카테고리의 다른 글 보기 :
