qwef

간단함. 그냥 일단은 라우터 다 지정해 놓고, 전체로 하면 저게 가장 우선순위가 낮나봄. 그냥 전체에 에러페이지로 가게끔 하면 됨.

npm i typescript -g npm i ts-node -g 이렇게 타입스크립트 자체를 깔고, 타입스크립트 실행하는? node-js처럼 타입스크립트 실행하는 거 깔고 npx create-react-app . --template typescript 이렇게 템플릿을 타입 스크립트로 한다고 지정해주면 타입스크립트 환경으로 설치됨.

import React from "react"; import { Link,Outlet } from "react-router-dom"; const Articles = () => { return ( 게시글 1 게시글 2 게시글 3 ); }; export default Articles; Link 먼저. 앞서 봐왔듯 그 Link임. 그냥 to={'경로'} 해서 보낼 수 있는. 그 다음 NavLink NavLink는 그냥 Link에 정말 간단한 기능 추가시킨 건데, 바로 자신의 경로가 선택되었다면 저 Link(html요소 상에서는 a태그)에 active라는 클래스를 붙여주는 거임. 그냥 ul>li>a.active 라던지 해서 scss에서 활용해서 쓰면 됨.

이거는 네비게이션, 정확히는 경로를 알려준다기 보다는 경로까지 가게 해주는 훅임. import React from 'react' import { Outlet, useNavigate } from 'react-router' const Layout = () => { const navigate = useNavigate(); const goBack = ()=>{ navigate(-1); } const goArticles = ()=>{ navigate('/articles', {replace:true}); } return ( 뒤로가기 Articles로 가기 ) } export default Layout 그냥 훅 가져오고, 저렇게 하면 콜백함수가 들어가나 봄. navigate(-1) 하면 바로 전, 뒤로 가기임. na..

라우트 안에 라우트 이렇게 하면 /articles/:id임. 마치 스프링 컨트롤러에서 class레벨에 Mapping 지정해주고, 컨트롤러 메소드마다 추가로 지정해주는 거랑 똑같네. 저기 안에 들어가 보면, import React from "react"; import { Outlet } from "react-router-dom"; import "../scss/Articles.scss"; const Articles = () => { return ( ); }; 저 Outlet이, 내부 라우터에 준 컴포넌트가 들어갈 수 있는 공간임. 즉, 위 같은 경우 /articles 해서 들어가면 저 Outlet 부분 안나오지만(지정을 안했으니까), /articles/1 해서 들어가면, 저 Outlet부분, 즉 /artic..

저 :username 저 부분 const params = useParams(); useParams()로 받을 수 있음. 이렇게 대상 컴포넌트에서 useParams()해서 이제 params.경로변수명 이렇게 값을 가져올 수 있음. 이거는 저 컴포넌트를 보여주고 싶은 부분에 이걸 해주는거고, 호출은 velopert 뭐 이렇게 Link로 하든, 주소에 직접 치든

일단은 최적화는 보통 그 의존성 배열에 있는 값이 바뀌면 다시 동작한다는 거, 그거는 기억하셈. 그건 확실함 뭐 배열속의 객체 속의 배열 이렇게 너무 깊은 데이터라도 의존성배열에 들어가있다 라고 할 수 있는 건 그 값이 바뀌면 다시 실행된다는 거.

이거 브라우저 확장프로그램에 있음. 그거 다운받아서 쓰면 됨. 컴포넌트에 대한 정보 보는 것도 있음. 여러가지 나옴. props, 사용한 훅, 뭐에 의해 랜더링 됐는지 등 다시 프로파일러 돌아와서, 저 파란버튼 누르면 측정 시작 저거 누른 후, 활동하면 됨. 뭐 버튼 누르거나 등. 그 후 측정 시작되서 빨간버튼이던 걸 다시 누르면 결과가 나옴. 그러면 랜더링 얼마나 걸렸는지 나옴. 이걸로 확인해보면서 어느 컴포넌트에서, 뭐가 얼마나 걸렸는지 확인하면서 작업하면 됨.

npm i classnames 이런 식으로 저 cs는 import cs from 'classname'; 저 classname import 시켜 놓음. 보면 간단함 className={cs("checkbox", {checked})} className={cs("참이면넣을클래스명", {조건})}

https://react-icons.github.io/react-icons/icons/md/ React icons preview for md #fff/#000#000/#fff#ddd/#333#333/#ddd#ff0/#fff#000/#ff0#0ff/#fff#000/#0ff#f0f/#fff#000/#f0f Codes import { null } from "react-icons/md"; mdmd/nullimport { null } from "react-icons/md"; react-icons.github.io 여기 제공해주는 사이트가 있음. npm i react-icons 해서 깔아야 쓸 수 있음. 보면은 import { IconName } from "react-icons/md"; 이런 식으로 import {..