React

마땅한 라이브러리가 없어 직접 만들어봤다.  아이디어시간과 구분선은 같은 컴포넌트 내부에 작성하여 미리 시간표 레이아웃을 만들어 두고 그 외 예약 정보는 absolute로 적용한다.  시간표 레이아웃 {TIMELIST.map((time) => ( {time} ))}export const TimeList = styled.div` ${flexBox("column", "start", "start")}; color: ${({ theme }) => theme.colors.gray}; gap: 4rem; width: 100%; height: 100%; div { ${flexBox()}; width: 100%; height: 1rem; span {..

기능오늘 날짜를 기준으로 7일 동안의 일자와 요일을 보여준다.하나의 날짜가 선택된다.   구현 시도 1 (실패)export default function WeekSelector() { const weekList: WeekList[] = []; const dayName = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"]; useEffect(() => { for (let i = 0; i {weekList.map((item) => ( {item.day} = {item.date} ))} );} 실패 요인weekList를 단순히 const로 선언했기 때문에 배열의 변화를 DOM이 감지하지 못..

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

중첩 라우팅 시에 Outlet 영역에 렌더링할 컴포넌트를 넣어준다고 한다.(※ 중첩되지 않은 경우에는 적용되지 않음 !) 쉽게 생각하면 url이 부모와 자식 구조를 가지고 있을 때 (ex. /parent → /parent/child), 부모 컴포넌트에 작성한 은 자식 컴포넌트가 들어갈 위치를 의미한다. 나는 Nav바와 Content영역으로 나뉘어진 레이아웃을 구성하고자 Outlet을 활용했다. 우선 라우터 구조를 App 엘리멘트 하위에 나머지 route가 중첩되도록 바꿔줬다.그러나 로그인 페이지에는 Nav바를 포함하지 않을 것이기 때문에 App Route 외부에 작성했다.const Router = () => { const browserRouter = createBrowserRouter( crea..

요구사항 분석오늘 날짜이번 달 정보시작하는 요일(1일)몇 일까지 있는지몇 주까지 있는지이전 달, 다음 달 이동 기능 구현 고민Date 객체를 더 쉽게 사용할 수 있게 도와주는 date-fns 라이브러리 함께 활용오늘 날짜 → new Date()시작하는 요일 → startOfMonth + getDay몇 일까지 있는지 → getDaysInMonth몇 주까지 있는지 → getWeeksInMonth다음 달 → addMonths이전 달 → subMonths  구현1. 기준일 변수 생성const [baseDate, setBaseDate] = useState(new Date());달의 시작 요일, 일 수 등을 구하려면 기준일이 필요하다. 2. 요일 리스트캘린더의 날짜 부분은 Grid로 구현할 것이기 떄문에 시작 요일..

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는 필수..

react-icons 라이브러리가 하나의 라이브러리 만으로 다양한 아이콘을 쉽고 빠르게 import 해올 수 있다는 장점이 있지만 라이브러리 전체를 추가할 경우 번들 크기가 커진다는 단점이 있다고 한다. 그래서 react-icons를 보다 더 효율적으로 사용할 수 있는 방법을 찾아보았다.(과연 그 결과는..?) 모듈 크기 측정은 vscode의 Import Cost 라는 익스텐션을 사용했다.    react-icons 모듈 크기비교를 위해 우선 기본적인 react-icons의 모듈 크기를 확인했다.  react-icons는 한 파일 안에 모든 아이콘이 담겨있다.    @react-icons/all-files 모듈 크기모든 아이콘을 담고 있는 파일 대신 개별 파일을 사용하기 위해 @react-icons/al..

React Iconsreact에서 아이콘을 사용하는 방법은 대표적으로 아래 2가지가 있다.아이콘 파일(svg, img, png 등)을 번들 안에 저장해두고 컴포넌트에서 import 해서 사용font-awesome 등의 아이콘 라이브러리 사용 그 중에서도 사용하려는 아이콘이 많아지고 출처가 다양해지면 1번도 2번도 비효율적이게 된다.그때 유용하게 사용할 수 있는 라이브러리가 바로 react-icons이다.  React Icons react-icons.github.io react-icons는 다양한 아이콘을 프로젝트에서 편리하게 import 해 사용할 수 있게 해주는 라이브러리다.Ant-Design, Bootstrap, Font Awesome 등 유용한 아이콘 라이브러리들을 따로 설치할 필요없이 react-..

React-query 란?React에서 데이터 관리를 단순화하기 위해 설계된 라이브러리   서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용된다.  Redux와 같은 상태 관리 라이브러리를 사용하고 있어도 React-query가 필요한 이유는 store에 서버 데이터와 클라이언트 데이터가 공존, 상호작용하며 서버 데이터도 클라이언트 데이터도 아닌 끔찍한 혼종이 되는 것을 방지할 수 있기 때문이다.즉, 서버와 클라이언트 데이터를 분리하여 관리할 수 있다. React-query 장점1. 자동 데이터 캐싱 기능말할 것도 없이 최고의 장점이다. 중복 데이터 요청이 발생할 경우 캐싱된 데이터를 반환하여 성능을 향상시키고 트래픽을 감소시킨다.이때 캐싱 ..