본문 바로가기

React

 (26)
[오류] Uncaught Error: useRoutes() may be used only in the context of a <Router> component. Uncaught Error: useRoutes() may be used only in the context of a  component.  index.js 파일에 BrowserRouter를 빼먹어서 난 오류. import 먼저 해주고import { BrowserRouter } from 'react-router-dom';  태그를 태그로 감싸줬더니 화면이 잘 뜬다.import React from 'react';import ReactDOM from 'react-dom/client';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';import { BrowserRouter } from 'rea..
[ React / ag-grid ] 관련정리 rowDrag: true  => 드래그 이벤트 적용시킬 column에 지정하면 아래처럼 표시됨.valueParser : 셀에서 값이 편집된 후 호출. 입력값이 지정한대로 파싱/변환되며 반환값이 valueSetter로 전달. valueSetter : 데이터가 셀에 입력되기 직전에 호출. 셀 값이 변경될 때마다 호출. (cellEditor 사용시 유용.)=> 변경값이 적용되면 return true, =>   return false 로 해주면 변경값이 적용되지 않음. =>  기존 데이터모델 값과 변경한 값이 같으면 newValue로 잡지 않는다. 대신 공백이 포함되면 잡음**  * valueParser에서 입력값이 변환되어  valueSetter 에서 변환된 값을 데이터 모델에 저장하거나 추가로직 실행. ce..
[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('컴포넌트가 처음 렌더링될 때 한 번만 실행'); }, []); * 두번째 인자가 주어지는 경우 => 주어진 특..

티스토리툴바