반응형 react7 AppLoading 앱이든 웹이든 어떤 프로그램을 만들다 보면 화면이 로딩이 다 되기전에 미리 해야할 일들이 있다. API를 통해 코드를 받아온다던가, 앱 로딩시 이미지를 보여준다던가.. DB를 생성하고 초기화를 한다던가.. 이런 일련의 작업들을 하기위한 Expo API가 AppLoading 이다. 자세한 설명 링크는 https://docs.expo.dev/versions/latest/sdk/app-loading/ AppLoading - Expo Documentation Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. docs.expo.dev 설치는 npx.. 2022. 10. 5. React-native 시작하기.. 이제 드디어 React-native를 시작한다. 마침 개인 학습에 필요한 앱이 생겨서 공부하면서 개발을 해 보려고 한다. React-native를 위한 프로그램 및 안드로이드/IOS 셋팅은 아래 링크에 잘 나와있다. 이 링크를 보고 필요한 안드로이드/IOS 셋팅을 해 주자. (난 이미 환경 셋팅이 되어 있으므로 패스~) https://www.reactnative.dev/docs/environment-setup Setting up the development environment · React Native This page will help you install and build your first React Native app. reactnative.dev PC는 MAC을 주로 사용하고, 에디터는 Vis.. 2022. 10. 4. react-hook-form React에서 form 을 다루는 라이브러리 form validation Input 테그가 늘어나면 그 수만큼 변수 및 useState()를 생성해 줘야함 각 항목마다 일일이 검증이 필요함 이 기능들을 간단하게 처리해 줄 라이브러리... 까먹지 않게.. 1차 정리를 해 둔다.. 설치 npm install react-hook-form 사용 import { useForm } from "react-hook-form"; function ToDoList() { const {register, handleSubmit, formState: { errors }, setError,} = useForm(); const onValid = (data) => { if (data.password !== data.password1).. 2022. 8. 17. Recoil * Recoil은 React를 위한 상태관리 라이브러리이다. * 하나의 상태를 모든곳에서 공용으로 사용 가능 * 설치 npm install recoil * Recoil을 사용하기 위해 부모트리 어딘가에 RecoilRoot가 필요하다. function App(){ return( ); } * Recoil Atom 만들기 import {atom} from "recoil"; export const isDisplay = atom({ key : "isDisplay", default: true ); * isDispay 값 참조 : useRecoilValue const isDisplay = useRecoilValue(isDisplay); * 값 변경 : useSetRecoilState const setDisplayAt.. 2022. 7. 21. 알아두면 좋은 팁.. (React Query) * React Query - : fetch의 로딩 상태와 로딩 이후 데이터를 셋팅하는것을 자동으로 해 주는 라이브러리 npm i react-query * apexcharts : 각종 chart 제공 npm install --save react-apexcharts apexcharts * CSS 색 참조 사이트 https://flatuicolors.com * head 영역 부분을 변경하기 위한 component npm i react-helmet 2022. 7. 21. useEffect ReactJs는 기본적으로 state 가 변경될때 component는 새로 실행됨. (모든 code가 실행됨) 만약 버튼을 누르면 카운트가 증가하고, 키워드를 검색할 수 있는 프로그램이 있다고 가정하면 import {useState, useEffect} from "react"; function App(){ const [counter, setConter] = useState(0); const onClick => () => setCounter((value) => value +1); const [keyword, setKeyword] = useState(""); const onChange = () => setKeyword(event.target.value); return( {counter} click ) } 위.. 2022. 7. 4. 이전 1 2 다음 반응형
