개발 공부/React

[React+TS] React에서 비로그인처리, PrivateRoute사용하기

시작하기 전 React에서 비로그인시, 또는 어떤 서비스를 쓰기 위한 제한이 있을때 PrivateRouter라는 커스텀 라우터를 사용해서 처리해줄 수 있다. 다른 방법도 있겠지만, 한꺼번에 관리할 때 편리한거 같아서 아직까지는 자주 사용 중 ! 필자는 react + typescript를 사용했다. 그리고 redux도 사용한다. 본문 우선 기본적으로 세팅은 되어있겠지만 react-route-dom 설치가 필요하다 npm i react-router-dom 그리고 기본 라우터가 세팅되어있다는 가정하에 진행할 예정이다. 1. 기본 라우터 우선 기본 세팅 되어있는 라우터는 다음과 같다. Route.tsx export default function Routes() { return ( ); } 이렇게 세팅되어있는 라..

[React+TS] useNavigate props 전달과 useLocation으로 props 받기/ useLocation unknown 타입

useNavigate React와 TS를 사용해서 프로젝트를 진행하고 있다. 클릭없이 페이지를 이동할 일이 생겨서 당연하게 useHistory를 사용했는데 띠용.... 이게 무슨일이야 해서 찾아봤더니 리액트 v6부터는 useHistory 대신에 useNavigate을 사용하라고 한다. React Router | Upgrading from v5 Declarative routing for React apps at any scale reactrouter.com 공식문서를 보면 useHistory를 사용했을 때랑 비교하면서 사용법이 잘 나와있다. 컴포넌트로도 사용할 수 있는 것 같다. useNavigate를 사용하면 .push 나 .go와 같은 함수가 필요없이 그냥 인자값에 따라서 알아서 함수가 적용되는것 같았..

[React+TS+StyledComponent] 사이드바 만들기 + 외부 클릭시 닫히는 기능

시작하기 햄버거 버튼을 누르면 사이드 메뉴가 나오고, 사이드 메뉴 내부에 있는 x 표시나 사이드메뉴 외부를 누르면 사이드메뉴가 닫히는 기능을 구현한다. 버튼 누르면 사이드메뉴가 나오기 버튼을 누르면 사이드 메뉴가 나오게 하는 것은 간단하다. 우선 헤더와 사이드메뉴 이렇게 두 개의 컴포넌트를 준비한다. 그리고 햄버거 버튼에 클릭 이벤트를 걸어주고, 나는 useState 변수를 사용해서 구현했다. Header.tsx function Header() { const [isOpen, setIsOpen] = useState(false); const toggleSide = () => { setIsOpen(true); }; return ( ); } 1. 사이드 메뉴 컴포넌트를 Header안에 같이 넣어줬다. 파라미터로..