🖥 Front-end/React
-
리액트 쿼리 react query🖥 Front-end/React 2022. 3. 25. 11:57
react query https://react-query.tanstack.com/quick-start React 애플리케이션에서 서버 state를 fetching, caching, synchronizing, updating할 수 있도록 도와주는 라이브러리다. "global state"를 건드리지 않고 React 및 React Native 애플리케이션에서 데이터를 가져오고, 캐시하고, 업데이트한다. 쿼리는 서버에서 데이터를 가져오기 위해 모든 Promise 기반 메서드(GET 및 POST 메서드 포함)와 함께 사용할 수 있다. 제공한 고유 키는 애플리케이션 전체에서 쿼리를 다시 가져오고, 캐싱하고, 공유하는 데 내부적으로 사용된다. useQuery에서 반환된 쿼리 결과에는 템플릿 및 기타 데이터 사용에 필..
-
리액트 테마 ThemeProvider 정리🖥 Front-end/React 2022. 3. 22. 15:14
리액트의 sytled-component는 ThemeProvider를 제공한다 ThemeProvider로 공통 스타일 속성을 제어할 수 있다. 💡참고 문서 https://styled-components.com/docs/api#typescript import { ThemeProvider } from 'styled-components'; 우선 styled-components에서 ThemeProvider를 import 해 온다 타입스크립트용 정의를 위해 src/styled.d.ts 파일을 생성한다 // import original module declarations import 'styled-components'; // and extend them! declare module 'styled-components'..
-
리액트+타입스크립트 기본 정리🖥 Front-end/React 2022. 3. 18. 22:04
type script 타입스크립트는 자바스크립트와 크게 다른 점이 없지만, 함수 등에서 인자를 전달할 때 필요한 타입을 미리 지정해놓을 수 있기 때문에 오류를 방지할 수 있는 이점이 있다 확장자는 ts 처음부터 type script 환경으로 react app을 만드는 경우 npx create-react-app my-app --template typescript 기존 react app에서 type script를 추가 설치하는 경우 1) npm install --save typescript @types/node @types/react @types/react-dom @types/jest @types : 모든 유명한 npm 라이브러리를 다 가지고 있는 저장소 2) js 확장자를 tsx로 수정 (tsx -> re..
-
리액트 styled components 정리🖥 Front-end/React 2022. 3. 17. 14:56
노마드 코더 강의 [React JS 마스터클래스] 들으면서 학습한 내용 정리 #2 STYLED COMPONENTS styled components를 사용하려면 상단에 styled components를 import 해와야 한다. import styled from "styled-components"; styled components를 이용해 스타일 설정 const Box = styled.div` background-color: red; width: 100px; height: 100px; `; styled components를 재사용할 때 한두가지 속성만 다르게 설정하고 싶을 때 const Wrapper = styled.div` display: flex; width: 200px; height: 100px; `..