본문 바로가기

react4

리액트-쿼리 / TanStack Query(@tanstack/react-query) - 2 5. Mutations - Mutations는 무엇일까? Mutation은 개발자가 서버에서 데이터를 생성하거나 수정하거나 삭제하는 등의 데이터 변경/수정 작업을 처리할 수 있도록 해주는 React-Query의 핵심 개념이다. 리액트 애플리케이션에서 위의 작업들에 해당하는 Side-effect를 수행하고 로컬 캐시를 업데이트하여 클라이언트 측의 데이터가 서버와 동기화 상태를 유지하도록 하는 데 사용된다. Mutation을 이해하기에 앞서 Mutation은 Query와 어떻게 다른 지 알아보면 다음과 같다. - 데이터 연산: Query는 데이터를 가져오고 읽는 데 중점을 두고 있으나 Mutation은 생성, 업데이트, 삭제와 같은 작업을 통해 데이터를 수정하는 역할을 담당한다. - Idempotence(멱.. 2023. 3. 16.
Elice 2차 프로젝트, Cocktailer 회고 2022년 12월 16일 ~ 2022년 12월 30일, 약 3주간 진행된 Cocktailer 프로젝트에 대한 회고 https://www.cocktailer.p-e.kr Cocktailer www.cocktailer.p-e.kr https://github.com/Cocktailer-Elice/cocktailer GitHub - Cocktailer-Elice/cocktailer: 🍹 칵테일에 대한 모든 것 🍹 칵테일에 대한 모든 것. Contribute to Cocktailer-Elice/cocktailer development by creating an account on GitHub. github.com 1. React-hook-form의 이용 처음 사용하게 된 계기는 전에 들었던 강의를 통해 react.. 2023. 1. 22.
Recoil State Management Library Recoil [https://recoiljs.org/ko/] state management tool을 이용하는 이유 - props가 이용되지 않는 components에서 불필요하게 prop을 받아 전해줘야 한다. (Traveling prop problem) - 그에 따라 수정 소요 발생 시 오류가 발생할 가능성이 높은 등의 문제가 발생할 수 있다. 다른 State management tools? React 자체가 가지고 있는 Context, Redux 등이 존재함. Recoil의 state 저장은 atom이라 부름 - root를 RecoilRoot로 감싸주어야 한다 - atom을 생성하고 보관하는 파일을 만드는 편이 좋다. atom의 생성 // atom의 생성.. 2022. 8. 25.
Typescript + styled-components styled-components는 JS 라이브러리로 typescript 환경에서 사용하기 위해서는 DefinitelyTyped를 이용해야 한다. npm install --save-dev @types/styled-components yarn add @types/styled-components -D styled components의 타입을 설명해주는 라이브러리를 불러오면 TS 환경에서 이용이 가능해진다. DefinitelyTyped는 인기있는 수많은 npm 라이브러리에 대한 타입 설명을 포함하고 있으니 이용할 일이 많을 것. -------------------------------------------------------------------------------------------------------.. 2022. 8. 12.