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

위 사진처럼 여러 개의 input이 있을 때 어떻게 하면 효율적으로 관리할 수 있을까? 각각의 input에 onChange 함수를 따로 걸어주게 되면 관리해야 하는 코드가 굉장히 길어진다. 그렇기 때문에 단 하나의 함수로 모든 input 변수의 변경을 관리하는 것을 목표로 했다.  구현const [inputs, setInputs] = useState({ name: "", rhType: RhType.RHPLUS, bloodAmount: "", blood: Blood.A, sex: GenderType.MALE, bloodType: BloodType.WHOLE, wallet: "", birth: today, createdDat..