FE/React & RN36 Recoil Atom 공식문서에서의 atom에 대한 설명은 다음과 같습니다. atom 은 기존의 redux에서 쓰이는 store 와 유사한 개념으로, 상태의 단위입니다. atom이 업데이트 되면, 해당 atom을 구독하고 있던 모든 컴포넌트들의 state가 새로운 값으로 리렌더 됩니다. unique 한 id인 key로 구분되는 각 atom은, 여러 컴포넌트에서 atom을 구독하고 있다면 그 컴포넌트들도 똑같은 상태를 공유합니다(상태가 바뀌면 바뀐 값으로 해당 컴포넌트들이 re-render 됩니다) state.js export const cookieState = atom({ key: 'cookieState', default: [] }); atom은 다음과 같이 작성해볼 수 있습니다. 정말 간단하죠? 설명과 같이 key.. 2022. 6. 23. react-query (2) react-query option 라이브러리 및 공식 문서 뜯어 버리기 Queries ( 쿼리 ) Mutations ( 변이 ) function App() { const mutation = useMutation(newTodo => axios.post('/todos', newTodo)) return ( {mutation.isLoading ? ( 'Adding todo...' ) : ( {mutation.isError ? ( An error occurred: {mutation.error.message} ) : null} {mutation.isSuccess ? Todo added! : null} { mutation.mutate({ id: new Date(), title: 'Do Laundry' }) }} > .. 2022. 6. 22. react-query (1) react-query 란? React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze. 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주며 클라이언트 상태와 서버 상태를 명확히 구분하기 위해서 만들어진 라이브러리이다. react-query 에서 기존 상태 관리 라이브러리(redux, mobX)는 클라이언트 상태 작업에 적합하지만 비동기 또는 서버 상태 작업.. 2022. 6. 21. Apollo GraphQL이 적용된 프로젝트를 쉽게 만들 수 있게 해주는 Node.js 패키지 ApolloServer : GraphQL이 적용된 서버를 쉽게 만들어줌 ApolloClient : GraphQL을 통해, 클라이언트상의 LocalState를 이용할 수 있게 만들어줌 1) Apollo 소개 Apollo란 GraphQL의 클라이언트 라이브러리 중 하나로 GraphQL을 사용한다면 거의 필수적으로 사용하는 상태 관리 플랫폼입니다. 다른 선택지로 GraphQL을 개발한 Facebook에서 직접 만든 Relay가 있지만, 학습 비용이 높고 React 계열만 지원한다는 단점이 있으며, 그에 반해 Apollo는 유연하고 러닝 커브가 높지 않을뿐더러 Front-End 프레임워크 삼대장?인 React, Agular, Vu.. 2022. 6. 15. 이전 1 2 3 4 ··· 9 다음
