Render
-
[React] Portal (포탈), Modal 구현하기Front-End(Web)/React - 프레임워크(React, Next) 2022. 2. 6. 16:08
회사에서 선배와 React로 모달 구현에 대해 고민하다가 알게된 내용이었다. 우리 회사 프로젝트는 Vue를 사용하기 때문에, 플러그인(this.$modal) 메서드를 통해 루트에 모달 컴포넌트를 주입, 삭제해서 표현한다. 하지만 React의 경우엔 어떻게 구현되는지 몰랐으며, 전역모달이 구현되는 영역에 Context API를 적용하면 되나 이 영역들이 리렌더링된다는 단점이 있었다. 그렇기에 전역상태를 통해 모달을 on/off 하는 방법을 찾아봤으며, 이 때 React의 Portal 기능을 통해 좀 더 효율적인 구현이 가능했다. 💙 Portal 이란? React 공식문서에 따르면, Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법이라고 소개하고 있다...
-
[Vue.js] 재사용 & 컴포지션 - (1) Mixin, Directive, RenderFront-End(Web)/Vue 2021. 7. 20. 21:58
내가 Vue를 사용, 공부하면서 가장 정리하고 싶은 섹션이 시작되었다! 프론트엔드 작업을 하다보면 반복되는 컴포넌트와 기능들이 등장하기 마련이다. 특히, 이런 기능들이 필요할 때마다 매번 컴포넌트에 작성하게 된다면, 이후 수정 등 유지보수가 매우 안 좋을 것이다. 이러한 기능들을 공통화, 전역화하는 다양한 기법들이 Vue에 존재한다고 들었다. (믹스인, 플러그인 등) 이들의 차이점은 무엇인지, 그리고 어떻게 사용하며 어떤 상황에서 특히 적합할지를 공부해보도록 하겠다. 💚 Mixins(믹스인) Mixins는 Vue 컴포넌트에서 재사용 가능한 기능을 배포하는 유연한 방법이라고 소개한다. * 믹스인(Mixin) : 다중 상속을 지원하는, 구현된 인터페이스를 의미함 의미 그대로, 컴포넌트에 원하는 기능을 실행하..