React 2

[React, JS] 라이브러리 없이 캘린더 구현하기

드디어 졸업을 했다..! 취업은 언제,,? ㅎ.. 프로젝트를 진행 중에 손쉽게 날짜를 선택할 수 있도록 캘린더(달력)를 구현하려고 하였다. 캘린더를 사용하는 일은 많으니까 라이브러리를 여러 가지 찾아보았으나... 구현에 있어 몇 가지 불편함이 있었다. 라이브러리를 왜 쓰지 않으셨습니까?! 1. 커스터마이징 등의 사용법에 대한 설명이 부족하다. 관련된 설명이 부족하다! 물론 나의 문해력이 부족해서 그럴 수도 있지만,, 다른 라이브러리에 비해 설명이 부족하다고 생각한다. 어떠한 기능을 사용하고 싶을 때 찾기가 굉장히 힘들었다. 2. 프로젝트가 무거워지는 걸 원치 않는다. 라이브러리를 추가할 수록 프로젝트의 무게가 점점 무거워지는 걸 원치 않는다. 최종적으로 해당 브라우저를 열 때 성능 저하가 생길 수 있기 ..

React 2024.02.21

[React] useNavigate와 useLocation으로 페이지 간 데이터 전달하기

React 애플리케이션을 개발하다 보면, 다른 페이지로 네비게이션을 하면서 특정 데이터를 전달할 필요가 종종 있다. 이를 위해 useNavigate와 useLocation 이라는 두 React Router Hook을 사용할 수 있다. 01. useNavigate useNavigate Hook은 페이지를 다른 경로로 이동시키는 함수를 제공한다. 이 Hook의 장점은 단순히 페이지를 이동시키는 것뿐만 아니라, 이동할 때 추가적인 상태(state) 또는 데이터를 전달할 수 있다는 점이다. useNavigate의 형태 navigate( '/이동경로', { state: { 키: 값, 키: 값, ... } } ) useNavigate 사용법 먼저, react-router-dom 패키지를 설치해야 한다. npm in..

React 2023.01.05