728x90 반응형 useref3 [React.js] 6주차 - TodoList 만들기 Todo 앱 만들기 1. App 컴포넌트최상위 컴포넌트인 App 에 todos state 를 정의해놓고 사용각 todo 에는 id 가 존재하는데, id 는 ref 로 정의 -> ref 는 state 와 다르게 값이 변경되어도 렌더링 ximport './App.css'import Header from './components/Header'import Editor from './components/Editor'import List from './components/List'import { useState, useRef } from 'react'const mockData = [ { id: 0, isDone: false, content: "React 공부하기", date: new Dat.. 2024. 11. 18. [TIL] 11/13 회원가입, useForm, http 클라이언트 생성, forwardRef 1. useFormreact-hook-form 에서 제공하며, 폼 상태 관리 및 입력값 검증을 간편하게 처리할 수 있다. (폼 데이터 관리 / 유효성 검사 / 폼 제출 처리 / 오류 상태 관리 등) useForm 훅의 리턴값register: 각 입력 필드를 react-hook-form 에 등록 (폼의 데이터를 추적/관리)handleSubmit: 폼 제출 이벤트를 처리하는 함수로 유효성 검사를 통과한 데이터만 전달formState: 폼 관련 상태 정보 제공 1.1. register email 과 password 폼을 register 에 등록하는 코드 스프레드 연산자로 register 를 펼쳐주고 각각 'email', 'password' 라는 이름으로 register 에 등록해준다. required 는.. 2024. 11. 13. [React.js] 4주차 - state, useState, useRef, React Hooks, 렌더링 1. State State 는 현재 가지고 있는 형태나 모양을 정의하고, 변화할 수 있는 동적이 값을 말한다. 리액트에서 모든 컴포넌트들은 State 를 가질 수 있는데(한 개의 컴포넌트는 여러개의 State 를 가질 수 있음), State 를 갖는 컴포넌트들은 이 State 값에 따라 렌더링 되는 UI 가 결정된다. 이 때 컴포넌트의 State 값에 따라서 화면이 다시 렌더링 되는 것을 리 렌더(Re-Render) 또는 리 렌더링(Re-Rendering) 이라고 한다. 1.1. useState 사용하기 useState 를 사용하려면 리액트의 내장 함수인 useState 를 import 해줘야 한다. import { useState } from 'react'; useState 함수를 호출하고 반.. 2024. 10. 29. 이전 1 다음 728x90 반응형
