최근 이직한 회사에서 php로 제작된 레거시 프로젝트를 담당하게 되었습니다. 프론트엔드 개발자 입장에서 백엔드 코드,DOM 조작 코드,HTML 코드 등이 뒤섞여있는 PHP 환경은 여간 불편한일이 아닙니다. 이를 개선하기 위해서 기존 프로젝트의 DOM 코드들을 web component로 적용하고 있습니다. 거의 매번 react로된 환경에서만 작업을 해오면서 생각할필요가 없어던 부분들을 고려해야 되다 보니 react의 장점이 느껴져서 둘을 비교하면서 정리해보겠습니다. 웹컴포넌트 web component const html = String.raw; class Modal extends HTMLElement { constructor() { super(); this.list = []; this.attachShado..
막연하게 반대로 생각하고 있었던 부분에 대해서 공식 문서를 기준으로 기록. https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes You Might Not Need an Effect – React The library for web and native user interfaces react.dev Adjusting some state when a prop changes props가 변경될때 state를 수정하는 경우 function List({ items }) { const [isReverse, setIsReverse] = useState(false); const [selection, setS..
목록 가상화 또는 "윈도잉" 무한 스크롤처럼 동적으로 node가 늘어나는 UI를 사용할때 node가 100개 1000개 늘어나면 어떻게 될까요 많은 행이 포함된 큰 테이블이나 리스트를 표시해야 하는 경우가 있습니다. 이러한 리스트의 모든 단일 항목을 로드하면 성능에 상당한 영향을 미칠 수 있습니다. 목록 가상화 또는 "윈도잉"은 사용자에게 보이는 것만 렌더링하는 개념입니다. 먼저 렌더링되는 요소의 수는 전체 목록의 아주 작은 부분 집합이며 사용자가 스크롤을 계속하는 경우 보이는 콘텐츠의 "window"이 움직입니다. 이렇게 하면 리스트의 렌더링 및 스크롤 성능이 모두 향상됩니다. react-window react-window는 애플리케이션에서 가상화된 목록을 쉽게 생성할 수 있게 해주는 작은 서드 파티 ..
CSS-in-JS는 모던 프론트엔드 개발, 특히 React 커뮤니티에서 점점 더 일반적으로 사용되고 있습니다. styled-components는 Tagged templates의해 구동되어 스타일만 정의하면 일반적인 react 컴포넌트를 생성할 수 있기 때문에 다른 CSS-in-JS 목록에서 눈에 띕니다. 이는 CSS 모듈성과 같은 중요한 문제를 해결하고, 중첩과 같은 non-CSS 기능을 제공하며, 이 모든 기능은 별도의 설정 없이 사용할 수 있습니다. 개발자는 CSS 클래스의 고유 이름에 대해 생각할 필요도 없으며, 클래스에 대해 전혀 생각할 필요도 없습니다. 그럼 styled-components는 어떻게 이를 해결할까요? styled-components에 익숙하지 않다면 우선 공식문서를 읽어보세요. ..
const AlertModal = ({title,desc})=> { const domNode = document.getElementById(`modal`) return ReactDom.createPortal( {title} {desc} , domNode ) } 모달처럼 React 컴포넌트 트리와 실제로 렌더링되는 결과물 Dom과 일치 하지 않고 사용하는 경우가 있습니다. 그럴때는 ReactDom.createPortal 메소드를 사용하면 됩니다. ReactDom.createPortal( 컴포넌트 , 렌더링될 장소 ) 위 처럼 컴포넌트 구조와 상관없이 특정 dom에 렌더링 하는 것이 가능 합니다.
Hoc vs Render 속성 값 컴포넌트에 공통적으로 사용되는 로직을 재사용 가능하도록 구현하는 방법에는 Hoc 와 Prop render 를 사용하는 2가지 방법이 있다. 1. 컴포넌트 내부 일부에서 적용하는 경우 HOC 현재 컴포넌트의 전체에 적용 //HOC //로그인시에만 렌더링하는 HOC const WithIsLogin = WrappedComponent => class WithIsLogin extends Component { state = { isLogin : false } checkIsLogin = ()=> { /***/ } componentDidMount(){ this.setState({ isLogin : this.checkIsLogin() }) } render(){ if(this.state...
Mobx observable의 state가 변경되면서 부수적으로 발생하는 기능 autorun autorun(effect: (reaction) => void effect 함수 내부의 obsevable를 subscribe 합니다. obsevable이 변경되면 autorun 를 실행시킵니다 autorun은 초기화시 실행 됩니다. reaction reaction(() => value, (value, previousValue, reaction) => { sideEffect }, options?) autorun 보다 더 세밀한 제어가 가능 2가지 인자를 받는데 첫번째 함수의 observable를 추적하고 renturn 값을 2번째 함수에서 사용합니다. 첫번째 함수에서 쓰인 observable의 변화에만 반응합니다...
