vs mui에 대해 자료를 조사하다보면 성능에 대한 이슈를 종종 찾아볼 수 있다. 그래서 과거의 글들을 찾아보면 Box보다는 div를 써라는 말도 자주 찾아볼 수 있다. mui - React Box - Material UI The Box component serves as a wrapper component for most of the CSS utility needs. mui.com The Box component serves as a wrapper component for most of the CSS utility needs. “Box 컴포넌트는 css 유틸을 필요로 하는 wrapper 컴포넌트 역할을 한다”고 되어 있다. 기본적으로 컴포넌트를 감싸는 wrapper 역할로써 사용된다. 설정을 통해 다른..

React를 좀 더 자세히 알아보고자한다. 앞선 포스팅에서 React의 기본에 대해서 꽤나 많이 다루었지만, 뭐랄까... 개발하면 할수록 뭔가 비어있다는 느낌이 강하게 든다. 프로젝트를하면서 알게 된것들, 배웠던것들 글로 남겨야지 하면서 바쁘다는 핑계로 간략하게 회사 회고록에 남기거나 나중에 자세하게 해야지 하면서 미뤄뒀었다. 그리고 최근 프로젝트중에 Next.js를 쓸 기회가 생겨서 더욱 React에서 뭔가가 비어있다가 느껴졌다. DOM React보다 더 이전의 Javascript의 개념부터 시작해야한다. 이 글에서는 자세히 다루지 않겠다. DOM(Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 문서 내의 모든 요소를 정의하고, 각각의 요소에 ..

2022.03.08 - [Javascript/React] - Recoil - 상태관리 라이브러리 Recoil - 상태관리 라이브러리 리액트로 개발을 진행하던 중 redux가 좀 복잡하고 귀찮아서 그냥 context도 써보고 상태관리에 대해 이것 저것 많이 알아보았다. 그러던중 Recoil이라는 오직 리액트를 위한 상태관리 라이브러리가 wonillism.tistory.com 이전에 단순히 recoil을 단순히 전역 상태만으로 사용해서(그조차도 맞는지 모르는...) 조금은 부족하다는 생각에 recoil을 좀 더 상세히 다루어보려고 한다. 상태 관리의 중요성 양방향 바인등을 하는 Angular와는 달리 React는 단방향으로 바인딩 한다. 상위 -> 하위 방향으로만 state를 props로 전달할 수 있고, ..

리액트 상태 관리는 꽤나 중요한 부분이다. 리액트 상태 관리를 어떻게 하냐에 따라 의미 없는 리렌더 등 성능 이슈가 생길 수 있고 어떤 상태 라이브러리를 쓰며 어떤 구조로 상태를 설계해서 다루냐에 따라서 유지보수 관점에서 코드의 라이프 사이클이 크게 짧아질 수도 길어질 수도 있다. 상태 설계는 만드는 개발자마다 중요하게 생각하는 지점이 갈릴 수도 있다. 한번 설계되면 프로젝트를 새로 만들지 않는 이상 고치기가 쉽지 않아서 깊은 고려를 하고 시작해야 되는 부분이다. 전역 상태 라이브러리로 Redux 가 매우 많이 쓰이고 있고, 많은 프로젝트에서 전역 상태가 무분별하게 사용되고 있다. 점차 전역 상태 라이브러리를 안쓰는게 좋다는 흐름이 생기고 있고, 리액트 팀에서는 Recoil 을 만들어서 기존의 전역 상태..

리액트 UI 라이브러리를 고려하던 중 MUI의 존재를 알게 되었고 나는 Material UI를 선택했다. 리액트 UI 라이브러리라고 하면 대표적으로 세가지를 꼽을 수 있겠다. antd, react-bootstrap, material-ui(현재는 mui) 최근 2년간의 그래프를 보면 위와 같다. antd와 react-bootstrap은 꾸준한 인기를 보여주고, material-ui는 저조한 성적을 보이다가 MUIv5가 릴리즈 되면서 엄청난 속도로 상승하고 있다. 사실 저 상승세를 보고 마음이 움직인 것도 있다 ㅎㅎ (그만큼 레퍼런스가 없습니다...) MUI는 구글의 디자인 철학인 Material Design을 구현한 자바스크립트 라이브러리이다. materialUI라고 불리던 MUI는 5버전으로 리뉴얼 되면..

React hook Form이란 form의 validation을 도와주는 라이브러리이다. 기본적으로 uncontrolled component를 베이스로 지원하고, controlled component에 대한 지원도 하고있다. ref를 기반으로 하기 때문에 다른 UI라이브러리와 호환이 잘 된다. useForm form을 만들기 위해서는 useForm을 사용해야한다. useForm에는 form을 만들기 위한 다양한 옵션이 있는데, 아래와 같다. const { register } = useForm({ mode: 'onSubmit', reValidateMode: 'onChange', defaultValues: {}, resolver: undefined, context: undefined, criteriaMode..

리액트로 개발을 진행하던 중 redux가 좀 복잡하고 귀찮아서 그냥 context도 써보고 상태관리에 대해 이것 저것 많이 알아보았다. 그러던중 Recoil이라는 오직 리액트를 위한 상태관리 라이브러리가 있는것을 알게 됐다. Recoil이란? 페이스북에서 개발한 새로운 상태관리 라이브러리. React에서는 자체적으로 상태관리 할 수 있는 Hooks나 ContextAPI를 제공하지만 사용하는데에 있어서 불편한점이 많다. 컴포넌트의 상태는 공통된 상위요소에서 공유될 수 있지만, 많은 컴포넌트가 상위-하위로 연결되어있을 때 이 거대한 트리가 다시 렌더링 되는 현상이 일어난다. Context는 단일 값만 저장할 수 있고, 여러 값들의 집합을 담을 수 없다. 이러한 특성들이 트리의 최상단으로 부터 최하단까지의 코..

Vite로 React-ts를 빌드하고 Tslint, Prettier 설정을 해보자 Vite 설치 yarn create vite 위 명령어를 입력하면 어떤 환경을 설정할지 가이드가 주어진다. 가이드에 따라 진행하면 아래와 같이 된다. npm을 이용해도 된다. vite공식 문서를 참고하자. 이후 만든 디렉토리로 이동 후 yarn으로 패키지들을 설치 yarn vscode 확장 설치 eslint prettier package 설치 "yarn add -D" 를 통해 아래 패키지들을 설치해준다. eslint 관련 eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prett..