전체 글

[React_study] useMatch()

* useMatch() 현재 위치를 기준으로 지정된 경로에 대한 일치 데이터를 반환합니다. useMatch()의 인자로 url을 넘기어 해당 url과 일치할 경우 url의 정보를 반환하고 일치하기 않을 경우 null을 반환한다. * useMatch() 활용 예시코드 import { useMatch } from 'react-router-dom'; const priceMatch = useMatch("/:coinId/price"); const chartMatch = useMatch("/:coinId/chart"); const Tab = styled.span` color: ${(props) => props.isActive ? "white" : "black"}; `; Chart Price useMatch를 이용해..

[TypeScript_study] type지정을 쉽게 하는 팁

* TypeScript type지정을 쉽게 하는 팁 Object.keys() 그리고 Object.values()를 활용한다. console에서의 temp를 이용한다. 연습을 위한 api (https://api.coinpaprika.com/v1/coins/btc-bitcoin) 1. api데이터를 console.log를 이용하여서 console창에 출력한다. 2. 마우스 우클릭을 하여서 Store object as global variable를 클릭해주어 임시 변수 안에 해당 값들을 담아준다. temp1이라는 임시변수안에 값이 할당된다. 3. Object.keys()를 이용하면 key들이 전부 배열안에 담기게 된다. 4. Object.keys()를 이용해 key를 가져온뒤 join함수를 이용해 문자열로 변..

[TypeScript] TypeScript & React SyntheticEvent(합성이벤트)

* [참고] https://ko.reactjs.org/docs/events.html import React, { useState } from "react"; import "./App.css"; function App() { const [value, setValue] = useState(""); const handleValue = (e: React.FormEvent) => { setValue(e.currentTarget.value); }; const onSubmit = (e: React.FormEvent) => {}; const onClick = (e: React.MouseEvent) => {}; return ( Click ); } export default App; React.event이름.이벤트를 발생..

[React_study] styled-components를 이용한 dark/light모드

* Theme를 이용한 dark/light모드 만들기 index.js파일에 기본 셋팅을 해준다. darkTheme와 lightTheme를 만들어준다. property의 네이밍은 두 객체 모두 동일하게 만들어 주어야 한다. ThemeProvider를 통해서 App을 감싸준다. 그러면 App컴포넌트 모든곳에서 theme이 사용가능해진다. theme이 props로 전달해주는 객체에 따라서 dark/light모드가 변경이 된다. // index.js import { ThemeProvider } from "styled-components"; const darkTheme = { textColor: "whitesmoke", backgroundColor: "#111", }; const lightTheme = { tex..

[React-Hooks] React Hooks - useAxios

* useAxios HTTP 통신 라이브러리 Axios를 활용한 서버와 통신을 하게 해주는 hook * useAxois.js 파일 import defaultAxios from "axios"; import { useState, useEffect } from "react"; const useAxios = (opts, axiosInstance = defaultAxios) => { const [state, setState] = useState({ loading: true, error: null, data: null, }); const [trigger, setTrigger] = useState(0); const refetch = () => { setState({ ...state, loading: true, });..

[React-Hooks] React Hooks - useNotification

* useNotification useNotification는 알림이 실행되는 hook이다. Notification에 대한 정보는 https://developer.mozilla.org/ko/docs/Web/API/notification 해당 링크를 참조 const useNotification = (title, options) => { if (!("Notification" in window)) { return; } const fireNotif = () => { if (Notification.permission !== "granted") { Notification.requestPermission().then((permission) => { if (permission === "granted") { new No..