REACT9 react-router-dom v6 이상 페이지 이동 button을 눌러 페이지 이동을 해야 할 때 이전 버전에서는 useHistory를 사용했다. 그러나 v6에서는 useNavigate를 사용한다. 사용법은 useHistory와 크게 다르지 않다. 먼저, useNavigate를 import 해준다. import { useNavigate } from "react-router-dom"; 그리고 함수 내부에서 선언을 한다. const navigate = useNavigate(); 버튼을 클릭했을 때 home으로 이동한다고 하면 const onClick = () => { navigate("/home"); }; 적어주고 버튼에 onClick을 부여하면 끝 - 2021. 12. 1. select option 값을 효율적으로 작성하는 법 select를 이용해 값을 출력한다고 해보자. 예를 들어 바나나, 사과, 토마토를 select로 만든다면 바나나 사과 토마토 이런식으로 작성하면 된다. 그러나 option 값이 많이 필요하다면? 그리고 재사용해야 한다면? 위 사진처럼 선택해야 하는 항목이 많아진다면 위 방식대로 코드를 작성하는 것이 부담스러워진다. 매번 사용할 때마다 option 값을 적어줘야 하는 것이다. 이때는 map을 이용해 간단하고 간결하게 표현해줄 수 있다. 0부터 59까지의 숫자를 선택해야한다고 해보자. 먼저, 사용해야 할 항목을 한 묶음으로 선언해준다. const minutes = [ { label: "00", value: "00" }, { label: "01", value: "01" }, { label: "02", valu.. 2021. 10. 19. react 한 화면 두개로 절반 분할 한 화면을 두개로 나눠보려고 한다. 전체 화면은 home, 위쪽 component는 nav, 왼쪽 component는 editor, 오른쪽 component는 box라고 명명했다. 먼저 home의 jsx를 이런 형식으로 적어준다. 전체 section을 잡아주고 editor와 box는 div로 묶어준다. css를 이용하여 section과 div를 스타일링해준다. .home { width: 100%; height: 100%; display: flex; flex-direction: column; } .container { flex: 1; display: flex; } 이제 각각 editor와 box의 css파일로 이동하여 스타일링해준다. .box { flex-basis: 50%; } .editor { flex.. 2021. 10. 15. 이전 1 2 다음
