DatePicker

이유기존 DOM 구조 상에서는 DatePicker와 SelectBox 컴포넌트 최상위 div 하위에 팝업이 포함돼있었다.그러나  DatePicker와 SelectBox를 다른 요소의 하위로 넣는 경우, 팝업 또한 상위 요소 범위를 벗어나지 못한다는 단점이 존재했다.그렇기 때문에 DOM구조에서 독립적으로 분리해 팝업이 열렸을 때 최상위에서 잘림없이 보여지게 하기 위해 재구현했다. 이때 모달에 많이 사용하는 createPortal을 사용했다.  createPortal createPortal – ReactThe library for web and native user interfacesko.react.dev부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링할 수 있게 한다.  creat..

useRef렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook useRef – ReactThe library for web and native user interfacesko.react.dev useRef는 처음에 제공한 초기값으로 설정된 단일 current 프로퍼티가 있는 ref 객체를 반환한다.ref를 사용하면 다음을 보장한다.(렌더링할 때마다 재설정되는 일반 변수와 달리) 리렌더링 사이에 정보를 저장할 수 있다.(리렌더링을 촉발하는 state 변수와 달리) 변경해도 리렌더링을 촉발하지 않는다. 그렇기 때문에 화면에 표시되는 정보는 state를 사용하는 것이 적합하다.(정보가 공유되는 외부 변수와 달리) 각각의 컴포넌트에 로컬로 저장된다.ref를 사용하여 DOM을 조작하는 것은 특히 일반..

지난 번에 react-datepicker 라이브러리를 커스텀하여 DatePicker 공통 컴포넌트를 만들었는데, 아무래도 라이브러리를 커스텀하기 때문에 불필요한 스타일을 빼고 원하는 스타일을 넣는 과정 등이 꽤나 불편하게 느껴졌다. (CSS 코드가 많이 더러워졌다...ㅜ) 그래서 캘린더 만든 김에 DatePicker도 직접 만들어 보려고 한다.물론 라이브러리가 제공하는 기능이 훨씬 많지만 내 프로젝트에서 필요한 기능만 컴팩트하게 만들어보려고 한다. 그래서 일단 사용자 입력은 제외하고 날짜 선택만 가능하도록 했다.    String, Date 타입에 대한 고민데이터 자체는 Date 타입이어야 date-fns 라이브러리의 날짜 관련 함수를 사용하기 편리하다.그러나 사용자에게 시각적으로 보여지는 포맷은 “YY..

React에는 아주 많은 달력 라이브러리가 있지만 가장 기본적이면서도 심플한 react-datepicker 라이브러리를 활용해봤다 !사용 방법이 간단하고 제공하는 기능이 꽤나 많다는 점이 좋았다.  라이브러리 설치 및 사용Install$ npm i react-datepicker$ npm i --save-dev @types/react-datepicker Importimport DatePicker from "react-datepicker";import "react-datepicker/dist/react-datepicker.css";  커스텀 참고 React Datepicker crafted by HackerOne reactdatepicker.com   Date PickerDefault selected는 필수..