리액트2 [React] 헤더에 뒤로가기 버튼 만들기 [React] 뒤로가기 버튼 만들기 (useNavigate) 리액트로 프로젝트를 진행하던 중 홈버튼은 만들어두었지만 뒤로가기 버튼이 없는 게 불편해서 만들어보기로 했다. button tag가 아닌 문구와 사진을 이용해서 만들고 싶었기 때문에 div 태그를 사용하던 중 발생하던 에러 해결 로그 react-router-dom 라이브러리를 사용해서 진행한다. version 5까지는 useHistory를 사용했지만, react-router-dom v6부터는 useNavigate를 사용하여 진행한다! 1. import useNavigate 먼저, react-router-dom의 useNavigate를 import 해준다. 2. useNavigate 함수 호출 function component 안에 useNavig.. 2022. 9. 20. [React-JavaScript] 게이지바 만들기 전체 값에서 현재 값의 비율을 나타내는 그래프를 만들고 싶었는데, 뭔가 모듈을 사용해야 하나 싶었지만 이런 간단한 형태는 div의 CSS값 조정으로 간단하게 할 수 있다는 걸 알았다. 전체 코드 import React, { useEffect, useState } from "react"; import styled from "styled-components";// 리액트의 styled-components 모듈 사용 // 테두리 코드 const StyledBase = styled.div` height: 26px;// 게이지 부분의 높이에 border 높이의 2배를 더해준다. border: 3px solid; margin-right: 15%;// 페이지에서 원하는 부분만큼 자유롭게 설정 margin-left: .. 2022. 8. 14. 이전 1 다음 728x90