개발9 [리액트] React 라이브러리인 SWR 설치 방법 useSWR State-While-Revalidate 데이터 패칭을 위한 리액트 라이브러리이다 캐쉬에서 데이터를 불러오고 검증을 하고 최신 데이터로 업데이트한다 자동적으로 데이터가 업데이트가 되어서 항상 최신 상태로 유지할 수 있게 된다 관리자 페이지를 만들다보니까 데이터를 다루게 되어서 swr을 사용해야했다 npm i swr 우선 swr을 설치해준다 import useSWR from 'swr' swr을 가져와준다 const fetcher = (url) => fetch(url).then((res) => res.json()); const { data, error } = useSWR(key, fetcher); API로 데이터를 반환하는 비동기함수이다 데이터를 가지고 와서 fetching 해주는 역할을 한다 .. 2023. 3. 24. [리액트] 탭 내용까지 구현하는 방법 import Tab from "./components/Tab"; import Furniture from "./containers/Furniture"; import Option from "./containers/Option"; import Visiter from "./containers/Visiter"; type TabItem = { id: number; title: string; content: string; }; const tabItems: TabItem[] = [ { id: 1, title: "통계", content: "a" }, { id: 2, title: "옵션", content: "b" }, { id: 3, title: "품목", content: "c" }, ]; function App() { .. 2023. 3. 24. [리액트] 함수형 컴포넌트 생성 단축키 rafce & rfce 화살표함수형 rafce 내가 자주 사용하는 것으로 함수형 컴포넌트에 export가 분리된 형식으로 되어있다. rfce 함수형 이것은 기본함수형 export 분리된 형태이다 이 단축키 사용하면 정말 편해서 알고 있으면 진짜 유용하다! 2023. 3. 24. [타입스크립트] 리액트 관리자 페이지 만들면서 배운 것 - 옵셔널 체이닝 옵셔널 체이닝 optional chaining https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining Optional chaining - JavaScript | MDN optional chaining 연산자 (?.) 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. developer.mozilla.org 상태관리는 같은 곳에서 하지 않는다. UI 컴포넌트는 UI끼리 하고 상태관리는 해당 컴포넌트의 상단에서 관리하여서 필요할 때마다 받아서 사용한다. Tab.tsx type TabProps = { tabTitle: String; i.. 2023. 3. 23. 이전 1 2 3 다음
