본문 바로가기

React

 (16)
[React 참고] eslint-disable / Lint 끄기 (WARNING) /* eslint-disable */  : Lint 끄기 (아래처럼 뜨는 WARNING 메시지 끄기) 아니면 WARNING이 일어나는 부분은 해결해주기.
[React Hook] useState import 후 사용import { useState } from "react";  'useState()' 는 '[상태값, 상태값 업데이트 함수]' 를 반환.자바스크립트의 비구조화 할당 (destructuring assignment) 문법이 적용되어 있다.  let [value, setValue] = useState("초기값");위의 예시에서 'value' 에는 "초기값" 이, 'setValue' 함수에는 상태를 업데이트 하는 함수가 할당된다.따라서 setValue 로 상태를 업데이트 하는 함수를 호출해서 상태값을 변경할 수 있다.setValue("새로운값") 비구조화 할당 이해를 위해 간단하게 표현하자면 아래와 같은 방식.const useState = ("새로운값") => { // state저장 ..
[react-hook-form] useFrom 활용 (회원가입창) 설치하고 import 해준다. import { useForm } from "react-hook-form"; import { DevTool } from '@hookform/devtools' 유효성 판별 결과를 편하게 확인할 수 있는 DevTool도 함께 설치해줬다. useForm 의 내장함수들 아래처럼 선언해준다. 사용할 것들만 해줘도 된다. (control은 DevTool용) const { register , control , watch , handleSubmit , reset , setValue , getValues , setError , setFocus , clearErrors , trigger , formState: { errors, isSubmitting, isDirty, dirtyFields, ..
[React Hook] useRef useState와 다르게 값이 재할당 되어도 리렌더링이 되지 않는다. 객체의 ref 속성을 통해 값을 할당하고, 이 값은 .current 속성에 저장. import React, { useRef, useEffect } from 'react'; function App() { const inputRef = useRef(null); useEffect(() => { // 컴포넌트가 마운트된 후 input 요소에 자동으로 포커스 inputRef.current.focus(); }, []); return ( ); }
[오류] SyntaxError: (경로) : Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (15:4) SyntaxError: (경로) : Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment ...? (15:4) return 으로 여러개의 태그를 반환해서 생긴 오류. return ( Test ); 아래처럼 하나의 태그로 감싸줬더니 해결. return ( Test );
[React Hook] useEffect import 후 사용 import React, { useEffect } from "react"; useEffect 는 두 개의 매개변수를 받는다. - 첫번째 인자는 실행할 함수 - 두번째 인자는 의존성 배열(Dependency array) 함수는 실행 시점은 의존성 배열에 지정된 변수들의 상태가 변경될 때 실행된다. * 두번째 인자가 없는 경우 => 렌더링마다 실행. useEffect(() => { console.log('컴포넌트가 렌더링될 때마다 실행'); }); * 두번째 인자가 빈 배열 [ ] 인 경우 => 최초 렌더링 후 한번 실행. useEffect(() => { console.log('컴포넌트가 처음 렌더링될 때 한 번만 실행'); }, []); * 두번째 인자가 주어지는 경우 => 주어진 특..
[오류] Uncaught (in promise) ReferenceError: (함수명) is not defined at callback ((파일명).jsx?t=1711695872236:83:9) at (파일명).js:22:7 phyho.jsx 파일에서 기본적인 작업을 하고 pyo.js에 db와 연결하는 함수를 만들어두고 가져와서 사용하는데 import를 까먹고 안해서 난 멍청오류다. pyo.js 아래처럼 각각의 함수들을 정의해줬다면, const getUserinfo = async () => { // 함수로직 } const getMemberinfo = async () => { // 함수로직 } const saveList = async () => { // 함수로직 } phyho.jsx 파일 상단에는 사용할 함수명을 모두 기재해줘야 한다. import { getUserinfo, getMemberinfo, saveList } from "../pyo"; 위의 예시에서 import 에 saveList 를 안적어줘서 발생한 오류.
[오류] Uncaught TypeError: Cannot read properties of undefined (reading 'length') at (파일명.jsx) useState로 배열인 'values' 값을 동적으로 할당해주고, 클릭이벤트가 발생하면 setValues로 값을 다시 할당해주는 로직이였는데 중괄호 {} 와 return 유무때문에 발생한 오류였다. 중괄호는 있지만 return을 써주지 않아 return값인 배열을 인식하지 못했고, 배열의 length를 읽어오지 못해 발생한 오류!!!! 아래처럼 써줘야 한다. * 화살표함수 기본 구문은 ( ) => { return ~ } (중괄호 & return 생략) const [values, setValues] = useState([]); .... setValues((prevState) => prevState.filter(item => item.no != no) ); (중괄호 & return 사용) const [va..

티스토리툴바