분류 전체보기138 [React] 리액트 쿼리 React Query https://tanstack.com/query/v4/?from=reactQueryV3&original=https://react-query-v3.tanstack.com/ TanStack Query | React Query, Solid Query, Svelte Query, Vue Query Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue tanstack.com 설치 yarn add @tanstack/react-query 로 우산 씌워주기 const queryClient = new QueryClient() export default funct.. 2022. 12. 11. [React] 컴포넌트의 재사용성 {children} 컴포넌트 재사용 방법 {children} 속성을 활용하면 컴포넌트 기본 틀은 유지하되 안의 내용은 원하는대로 입맛에 맞게 조정할 수 있음 사용예시 function Card({children}) { return ( 2022. 12. 9. [React] VSC yarn 리액트 초기 설정 방법 터미널 통해서 파일 생성 : mkdir 파일명 생성된 파일로 진입 : cd 만들어준 파일명 yarn create react-app 새로운 파일명 VSC로 해당 파일 진입 : code . eslint 다운로드 yarn add -D eslint-config-react-app 최상위 폴더 내 .yarnrc.yml 파일 생성 후 내용 아래와 같이 지정 해준 후 yarn start packageExtensions: react-scripts@*: peerDependencies: eslint-config-react-app: '*' ** 오류 발생시 yarn cache clean 후 yarn install 해주기 7. gitignore에 아래와 같이 내용 추가 # See https://help.github.com/ar.. 2022. 12. 8. [React] useContext 공식 참고 문서 : https://reactjs.org/docs/context.html Context – React A JavaScript library for building user interfaces reactjs.org 컴포넌트와 컴포넌트 간 상태를 공유할 때 사용 부분적인 컴포넌트들의 상태 관리, 전체 앱의 상태관리 구현 Context Provider 안에서 렌더링되는 컴포넌트는 context value를 가져옴 context value가 바뀌면 내부 컴포넌트는 모두 리렌더링됨 사용 예시 : import { createContext, useContext, useState } from "react"; const DarkModeContext = createContext(); export functi.. 2022. 12. 7. [CSS] 유용한 CSS 속성 정리 헷갈리거나 활용하지 못했던 CSS 속성들 정리 (...ING) accent-color : ㄴ 브라우저 기본 지정 색 (e.g 체크박스는 파란색) 변경 해줄 수 있음 min-height: 0 ㄴ flex 아이템 중 어느 하나가 길어지는 경우 위의 요소가 화면을 넘어갈 때에 0으로 지정해주면 해결 가능 list-style-type: none; ㄴ li 태그 bullet 표시 제거 :root { --color-bg-dark: #f5f5f5; --color-bg: #fdfffd; --color-grey: #d1d1d1; --color-text: #22243b; --color-accent: #f16e03; } ㄴ 자주 쓰는 색상 이름 지정하여 var(--color-bg)와 같은 형태로 돌려쓸 수 있음 *{ box.. 2022. 12. 6. [React] useReducer / Immer useReducer 참고 공식 문서 : https://reactjs.org/docs/hooks-reference.html#usereducer Hooks API Reference – React A JavaScript library for building user interfaces reactjs.org 관리할 상태값이 많고, state들을 업데이트 하는 함수가 많을 때 활용 컴포넌트 내에 정보를 업데이트 하는 로직이 섞여 있고 다른 컴포넌트 내에서도 재사용 하기 위해 사용하는 Hook 유지, 관리에도 편리 사용 예시 : const initialState = {count: 0}; function reducer(state, action) { switch (action.type) { case 'increment.. 2022. 12. 4. 이전 1 ··· 20 21 22 23 다음