React8 [React.js]초보자도 쉽게 따라하는 useForm 사용하기 안녕하세요. 이번에 useForm 사용하게 되면서 인터넷에 useForm 사용 검색하고 여기 저기 찾아봤는데 , 훌륭한 소스들이 많았습니다! 하지만 초보자들은 따라하기가 쉽지않을거같아요 useForm을 활용한 component를 활용해서 사용해야해서요 그래서 따로 component를 사용하지 않고 바로 useForm 활용할 수 있도록 참고할 수 있는 사이트를 찾았습니다 해당 사이트 참고해서 설명을 드릴게요 . import React from "react"; import { useForm } from "react-hook-form"; const testUseForm = () =>{ const { register, handleSubmit } = useForm(); const debugRegistData = .. 2022. 11. 30. [React.js] 초보자도 쉽게 따라하는 checkbox defualt로 체크 하기 안녕하세요. 리엑트 하다가 checkbox 사용 예시는 많은데, 기존에 데이터를 미리 디폴트로 체크 해놓아햐 하는 경우가 발생 합니다. 일단 체크박스 생성을 합니다 그 다음 해당 input에 해당 value값을 넣어 줍니다 예를 들어, 우리는 기존의 List 배열과 , 체크된 리스트를 갖고있을 checkList 배열을 선언해 줍니다 const [list, setList] = usestate(['a','b','c','d']); const [checkedList, setCheckedList] = useState([]); 위 체크 박스를 반복문으로 돌려서 체크박스를 생성 해 줍니다 list.map((item) => { return( ) } ); 이렇게 생성해주면 value값은 어디에도 나타나지않고 hidden.. 2022. 11. 28. [React.js] dotenv 라이브러리로 .env .dev .local 환경 변수 설정 dotenv 파일을 일단 설치 해 줍니다 yarn 혹은 npm 설치 방법 $ npm i dotenv $ yarn add dotenv dotenv 사용 예시 입니다 import { config } from "dotenv"; config(); export const API = `${process.env.REACT_PROTOCOL}://${process.env.API_URL}`; config를 import 해준 후 , 해당 JS 파일에 config(); 선언 후, process.[환경변수파일명].[선언된규칙] 으로 사용할 수 있습니다. 예시 : process.env.REACT_PROTOCOL 그럼 .env 파일을 생성 후, 아래와 같이 선안해줍니다. REACT_PROTOCOL="http" API_URL="12.. 2022. 11. 22. [React.js] useLayoutEffect 와 useEffect의 차이점(리스트 초기 화면 깜빡임 해결) react를 사용할 때 useEffect로 초기 데이터를 불러올 시 loading 여부를 확인해야 합니다. List 페이지를 구현할 때 "데이터가 없습니다"가 뜬 다음 데이터가 뜨는 현상을 자주 겪었을 것입니다. 보통 loading 플래그를 사용해서 이를 해결했는데, 이 과정 없이 해결할 수 있는 방법이 useLayoutEffect입니다. useLayoutEffect 사용방법은 useState와 동일합니다. 차이점을 간략히 설명드리겠습니다. 예를 들어, useEffect(()=>{ setData("data"); }, [ ] } 이렇게 초기 함수를 선언해주면 data은 화면이 모두 띄운 후 작동하게 됩니다. 즉, "데이터가 없습니다"를 화면에 띄운 후 깜빡임으로 변하면서 "data"를 띄웁니다 하지만 us.. 2022. 11. 16. 이전 1 2 다음