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..

React에서 CSS를 입힐 때 여러모로 불편한 점이 많다. css파일을 import 해서 사용하면 class 이름을 일일이 관리해주어야하고 인라인으로 작성된다면 가독성이 좋지 않다. 중복되는 코드들도 해결하고 싶은경우가 많다. 이러한 불편한 점을 많이 해소해주는 것이 styled-components이다. https://styled-components.com/docs styled-components: Documentation Learn how to use styled-components and to style your apps without stress styled-components.com styled-components 문서에서 다양한 기능들을 확인해 볼 수 있다. 간단한 사용법은 아래와 같다 imp..

https://wonillism.tistory.com/264 [리액트를 다루는 기술] Hooks (1) Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 wonillism.tistory.com useMemo useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. import React, { useState } from 'react'; const getAverage = nums => { console.log('평균값 계산 중...'); if (nums.length === 0) return 0; const sum..