Study/실무 (34) 썸네일형 리스트형 React-Router v6 React-Router ? 신규 페이지를 불러오지 않는 상황에서 사용자가 요청한 URL에 따라 해당 URL에 맞는 하나의 페이지를 렌더링해주는 라이브러리입니다. const App = () => { return ( //상단에 위치하는 라우트들의 규칙을 모두 확인, 일치하는 라우트가 없는경우 처리 ); } export default App; useParams :id 와 같이 페이지 별 id값을 받아올 수 있습니다. id를 사용하는 페이지에서 useParams를 사용해줍니다. const {id} = useParams(); useSearchParams ( QueryString ) ?를 사용하며, data?id=1&lang=ko 와 같이 네임과 벨류를 함께 전송해줍니다. const [serchParams, set.. useQuery useQuery ? API연동에 특화된 라이브러리로 Hook을 기반으로 데이터 로딩을 편하게 구현하도록 도와줍니다. 반환 값을 활용하여 성공, 실패 처리가 가능합니다. ( isFetching, isLoading, error, state 등 ) Status isLoading : 현재 데이터 요청 중 isError : 오류 발생 isSuccess : 데이터 요청 성공 data : 요청 성공한 데이터 refetch : 다시 요청을 시작하는 함수 const Ex = () => { const result = useQuery('posts', postData); const { data, error, isLoading } = result; if (isLoading) return Loading...; if (error).. useMutation useMutation ? 데이터를 생성 / 업데이트 / 삭제할 때 주로 사용합니다. useQuery optimistic update을 활용해서 성공을 예상하며 미리 UI부터 갱신할 수 있습니다. Option onMutate: (variables:TVariables) => Promise|TContext|void mutationFn이 실행되기 전에 먼저 실행할 함수입니다. mutation 함수가 전달받은 파라미터가 동일하게 전달됩니다. optimistic update 사용 시 유용한 함수입니다. 여기서 반환된 값은 onError, onSettled 함수에 전달됩니다. onSuccess: (data: TData, variables: TVariables, context?: TContext) => Promise .. Typescript Type vs interface 확장하는 방법 interface UserInterface { id: number name: string } interface InfoInterface extends UserInterface { age: number } type UserType { id: number name: string } type InfoType = UserType & { age: number } 선언적 확장 (선언병합) type은 새로운 속성을 추가하기 위해서 다시 같은 이름으로 선언할 수 없지만, interface는 항상 선언적 확장이 가능합니다. interface Window { title: string; } interface Window { ts: import("typescript"); } // 같은 interface 명으로 .. window.location.href vs useNavigate vs Link window.location.href vs useNavigate useNavigate history모듈에 의존성을 가지고 있고, 이걸로 라우팅을 지원한다. HTTP요청을 새로 하지 않고 안의 내용만 바꾼다. * 뒤로가기버튼을 클릭해도 페이지가 unload되지 않고 내용만 바뀐다. location.href 페이지를 전환하면 HTTP요청을 새로 한다. * 뒤로가기를 클릭하면 페이지가 unload되고 새로운 페이지를 불러온다. Link vs useNavigate useNavigate navigate의 인자로 설정한 path값을 넘겨주면 해당 경로로 이동할 수 있습니다. 함수 호출을 통해 이동하기 때문에, 이동할 때 조건을 걸 수 있습니다. ex) 로그인이 되어있는 사용자가 My 버튼을 눌렀을 때 -> My p.. web3-react를 이용한 메타마스크,코인베이스 지갑 연동 Web3-react react 에서 Context를 이용해 web3의 Dapp 과 관련된 특정 주요 데이터(사용자의 현재 계정, chain id, web3 provider 등)를 최신상태로 유지해주는 state machine 입니다. Web3 설치 및 사용해보기 npm i @web3-react/core @ethersproject/providers import { Web3ReactProvider } from "@web3-react/core"; import { ExternalProvider, JsonRpcFetchFunc, Web3Provider, } from "@ethersproject/providers"; import ReactDOM from "react-dom"; import App from "./Ap.. useRef 를 사용하여 scrollEvent 만들기 Ref 란? reference의 약자로 참조라는 뜻입니다. DOM을 직접 참조하기 위해 사용합니다. Ref를 사용하여 element가 참조하는 변수에 접근해 변경하고, element를 제어할 수 있습니다. ref의 장점 컴포넌트를 재사용했을 때 id를 사용하면 유일해야 하는 id 는 더이상 유일하지 않고, 문제가 생길 수 있습니다. ref를 사용해야 할 때 스크롤 이벤트 포커스, 텍스트, 미디어 재생 관리 등 canvas ... useRef 사용하여 스크롤 이벤트 만들기 const Test = () => { const scrollRef = React.useRef(); // ref 변수 선언 const scrollToTop = () => { const { scrollHeight, clientHeight }.. JSON TypeScript TypeError JSON TypeScript TypeError TypeError: the JSON object must be str, not 'type' 해결방법 JSON.stringify() let data = JSON.parse(JSON.stringify(eventData)); JSON.parse(string) let data = JSON.parse(eventData as string); 이전 1 2 3 4 5 다음
