본문 바로가기

개발/react21

Recoil은 부모-자식 prop의 전달 문제를 해결한다! 기존에 리액트에서는 부모로부터 자식으로 prop을 전달하기 위해 먼 경로를 거쳐야 하는 문제가 있었다. 이 문제를 해결하기 위해 recoil이 도입되었다. recoil은 상태관리 라이브러리이고, redux보다 이해하기 쉽다. 우선 npm install recoil을 해주고 상태관리하고싶은 것은 atom에 넣어준다. atom에는 key와 default를 지정해준다. key는 atom을 식별하는데 사용되는 고유한 문자열이고, default는 atom의 초깃값 또는 Promise 또는 동일한 타입의 값을 나타내는 다른 atom이나 selector이다. const namesState = atom({ key: 'namesState', default: ['', 'Ella', 'Chris', '', 'Paul'], .. 2022. 11. 21.
React Query는 데이터를 캐싱한다! 리액트 쿼리는 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 만든다. API를 가져올 때 사용하는 코드를 몇 줄만으로 줄일 수 있다. 우선 npm i react-query 로 설치해준 다음에 다음과 같이 기본 세팅한다. import { QueryClient, QueryClientProvider } from "react-query"; const queryClient = new QueryClient(); export default function App() { return ( ); } useQuery를 사용하면 isLoading, data 값을 더 쉽게 가져올 수 있다. 첫번째 인자에는 유니크한 값, 두번째 인자에는 promise를 반환하는 함수(fetcher)를 넣어주어야 한다. const [is.. 2022. 11. 19.
TypeScript에서 Obejct 타입을 선언할 때 interface를 사용! TypeScript는 객체에 그냥 접근할 수가 없고, 타입을 명확히 알려주어야 한다. 이 때문에 interface를 사용한다. interface User { name:string, age: number } const user:UserInfo = { name: "Chloe", age: 30, } 위와 같이 선언하면 된다. 2022. 11. 13.
TypeScript는 개발자의 실수를 막아준다! Typescript는 개발자가 저지르기 쉬운 실수를 막아준다. CRA를 할 때 같이 설치해서 시작하는 것이 좋다(tsconfig.json도 같이 설치) npx create-react-app my-app --template typescript 그리고 react와 typescript를 함께 사용할 경우 확장자는 tsx로 해준다(예: App.tsx) typescript를 설치했을 때는 이 언어가 모르는 것에 대해서는 모두 밑줄이 표시되므로 주의하고 내가 쓰는 자바스크립트 라이브러리들 중에 typescript에서 모르는 것이 있다면 definitely typed 레포에 기여할 수도 있다. https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/README.. 2022. 11. 13.

티스토리툴바