본문 바로가기

React/공부공부

 (12)
[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 ( ); }
[React Hook] useEffect import 후 사용 import React, { useEffect } from "react"; useEffect 는 두 개의 매개변수를 받는다. - 첫번째 인자는 실행할 함수 - 두번째 인자는 의존성 배열(Dependency array) 함수는 실행 시점은 의존성 배열에 지정된 변수들의 상태가 변경될 때 실행된다. * 두번째 인자가 없는 경우 => 렌더링마다 실행. useEffect(() => { console.log('컴포넌트가 렌더링될 때마다 실행'); }); * 두번째 인자가 빈 배열 [ ] 인 경우 => 최초 렌더링 후 한번 실행. useEffect(() => { console.log('컴포넌트가 처음 렌더링될 때 한 번만 실행'); }, []); * 두번째 인자가 주어지는 경우 => 주어진 특..

티스토리툴바