Web development/React.js & Typescript5 [React + Typescript] Typing Tips 리액트 타이핑 팁 백엔드에서 라이트하게만 타입스크립트를 사용해오다가, 리액트에서 사용하려니 너무 어려웠다. 백엔드에서는 거의 내가 직접 만든 것들에 대해서만 타이핑하면 되었는데, 리액트에서는 리액트 컴포넌트까지 타이핑해야 하다보니 어떤 타입인지 제대로 입력하기가 헬이었다. 결국 처음엔 any로 도배하면서 구현했다가, 하나씩 실마리를 잡을 때마다 다른곳들을 채워가는 중... 그래서, 리액트+타입스크립트 쌩초보 입장에서 팁을 공유하고자 작성한다. 유용하다고 생각되는 것을 찾을 때마다 조금씩 보완할 예정이다. 💡 나만 몰랐던 이야기(?) RouteComponentProps은 라우트를 통해 렌더링되는 컴포넌트의 기본 prop이다. history, location, match, staticContext?로 구성되어 있다. Reac.. 2020. 11. 15. [React] Warning: Component update a component Bar while rendering a different component 발생 조건 특정 컴포넌트 렌더링 시 mobx 스토어의 값을 변경하도록 함 내 경우 /bar/edit 라우트로 접속 -> bar edit 화면 렌더링 -> 스토어의 menu 값을 'edit'으로 변경하는 상황이었음 해당 스토어 값을 통해 다른 UI를 보여줘야 해서 이렇게 구현하게 됨 발생 원인 렌더링 중 state가 변경되면 안됨. state 변경시 다시 렌더링이 일어나므로 당연한거였다... 해결 방법 컴포넌트 렌더링 시 store 또는 state 값 변경이 필요한 경우, useEffect 안에서 값을 변경한다. useEffect(() => { menu.changeMenu(Menu.Edit); // 스토어의 값을 변경하는 코드(setState) }, []); 2020. 11. 15. [React, Material UI] Warning: MaxListenersExceededWarning 발생 조건 Material UI에서 Grid 컴포넌트를 사용해 리스트 구현 리스트 테이블의 컬럼 수가 10개 이상일 때 발생 원인 Event listener는 10개가 default 컬럼을 resizing해주는 이벤트리스너(colResizer)가 컬럼수만큼 생성된다. colResizing 이벤트를 막을 수 있는 XGrid컴포넌트를 사용해도 되지만, 상업적 사용시 유료이다. 따라서 컬럼이 10개 이상이 되면 워닝이 발생함. 해결 방법 아래 코드 추가 require('events').EventEmitter.prototype._maxListeners = {컬럼 수}; 나는 12를 넣었다. 참고로 0을 넣으면 무제한이 되는데 권장하지 않는다. 2020. 11. 15. [React + Material UI Modal] Warning: Failed prop type: Invalid prop children ... 해결하기 Warning: Failed prop type: Invalid prop children ... 발생조건 React + Material UI 환경에서 Modal 사용시 발생원인 Material UI의 Modal은 ref와 함께 자식 컴포넌트로 전달되어야 한다. 더 찾아보면 함수형 컴포넌트에서는 사용할 수 없거나 복잡한 방법을 사용해야 한다는 내용들이 나오는데, 클래스 컴포넌트는 권장사항이 아니기도 하지만, Mobx나 useStyle등을 사용하는 방법도 달라서 찝찝하고 복잡해질 수 있다. 결국 수정할수록 더 많은 에러를 뿜는바람에 클래스 컴포넌트를 사용하는 방법으로는 해결하는것은 포기했다.. 해결방법 // 모달을 사용할 함수형 컴포넌트 return( { setOpen(false); }} aria-labell.. 2020. 11. 15. React.js 둘러보기 약간의 기초지식이 있는 백엔드 개발자 입장에서, React.js를 처음 접하면서 느낀 점들을 정리해보고자 한다. React를 바라보는 지식수준(현재 내 상태) Javascript의 기본적인 문법 지식이 있음 node.js, express를 사용한 개발 경험이 있음 html, css를 사용한 간단한 프론트 구현 경험이 있음 React가 어떤 원리로 구동되는지, 어떤 컨셉인지는 전혀 모름 매우 유용했던 자료들 이고잉님의 생활코딩 React강의 리액트 공식 Docs velopert님의 누구든지 하는 리액트 이 글은 위 자료들을 보면서 인상깊었거나 중요하다고 생각되는 부분들을 정리한 글이니 참고해주세요. 제 경우 이고잉님의 강의 위주로 진행하면서, 중간중간 좀 더 알고 싶은 부분은 다른 자료를 참고해가며 공부했.. 2020. 10. 12. 이전 1 다음
