리엑트19 16. Admin 리스트 페이지 구현 16-1. useSWR을 이용하여 API 연동 useSWR : 데이터 가져오기를 위한 React Hooks아래는 useSWR 공식 문서https://swr.vercel.app/ko 데이터 가져오기를 위한 React Hooks – SWRSWR is a React Hooks library for data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.swr.vercel.app 설치 명령어 : npm install --save swr 캐시에 저장된 데이터가 실제 서버에서 변경이 생긴 경.. 2024. 8. 27. 15. Admin 설계 15-2. 컴포넌트 구조 설계설문 조사 관리 페이지 설문 조사 빌더 페이지 15-3. 프로젝트 세팅 프로젝트 생성 명령 : npx create-react-app survey-pie-admin npm install --save-dev eslint-plugin-simple-import-sort 15-4. Ant Design 설치 15-5. 라우터 적용리액트 라우터 설치 명령 : npm install --save react-router-dom https://charactermail.tistory.com/758 http://example.com/detail 전통적인 방식의 웹 서비스에서 라우팅은, 서버에 요" data-og-host="charactermail.tistory.com" data-og-sou.. 2024. 8. 26. 13. SurveyPie API 연동 13-1. Axios 설치 공식 라이브러리https://axios-http.com/kr/docs/intro api 사용 방법https://axios-http.com/kr/docs/api_intro 설치 명령어 : npm install axios --save 예제 API 서버 깃허브 링크 https://github.com/hackurity01/survey-pie-server 13-2. Recoil의 Selector로 API 연동리엑트에서 외부 서버에서 받아온 데이터를 어떻게 관리해야 할까? 리엑트는 내부의 특정 상태가 변경되면 관련 컴포넌트들을 리렌더링 하여 변경된 상태를 화면에 반영한다. React에서 API 호출 과정다른 프로그래밍 언어들과는 다르게 자바스크립트는 사용자를 기다리지 않게 하기 .. 2024. 8. 21. 12. 전역 상태 관리 12-1. 전역 상태 관리란? 리덕스, 리코일전역 상태 관리 라이브러리ReduxRecoilContextAPIMobX https://velog.io/@rachel28/Prop-Drilling 위 이미지에서 컴포넌트들이 위처럼 구조화되어 있고, 최상위 컴포넌트에서 최하위 컴포넌트까지 props를 전달하고 있다.위 과정을 prop drilling 이라고 한다. 그런데 만약 여기서 최상위 컴포넌트의 state가 변경된다면?해당 state 값을 사용하는 컴포넌트는 하위 주황색 2개 컴포넌트인데, 굳이 리렌더링 되지 않아도 되는 데이터가 전달되는 과정에서 거쳐간 컴포넌트들 모두가 리렌더링이 되어버린다.-> prop drilling은 리액트 서비스의 성능을 저하시키는 한 요인이 된다. 그래서 상태를 여러 컴포넌트.. 2024. 8. 19. 이전 1 2 3 4 5 다음
