반응형 reactjs8 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. tomcat에 배포하기... ReactJS로 코딩을 하면 무조건 nginx나 node로 서버를 올려야 하는줄 알았는데... 톰캣으로 편리하게 올리는 방법이 있었다. 먼저 React 프로젝트에서 package.json 에 아래의 항목을 추가 한다. "homepage": "domin:port/folder", 의 형식으로 추가 "homepage": "http://dev.test.com", // 난 이렇게 추가 React 빌드 npm run build 그러면 프로젝트 폴더 밑에 build 폴더가 만들어 진다. 그리고 이 build 폴더 밑의 모든 파일들을 복사해서 tomcat의 webapps 폴더 아래에 복사를 해 주는데... localhost에 바로 올리고 싶으면.. ROOT 폴더에 넣어주고.. http://dev.test.com/dev.. 2022. 7. 15. styled-component(1) styled-component 설치 : 해당 프로젝트의 디렉토리에서 실행 npm i styled-components 사용방법 import styled from "styled-components"; const div = styled.div``; // back tick (숫자 1 왼쪽 옆에 있는것)을 입력하고 그 사이에 스타일을 작성한다. const div = styled.div` background-color: red; width: 100px; height: 100px; `; styled-component에 props 전달 const Div = styled.div` background-color: ${(props) => props.bgColor}; width: 100px; height: 100px; `; .. 2022. 7. 11. 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 다음 반응형