본문 바로가기

팀프로젝트_기록일지/React_이정환_useState,useRef9

(9).이정환_react.js강의_데이터의 수정 기능,데이터 삭제 기능 ●1_ 데이터의 수정 기능 전략 :List에 item들에 checkBox를 체크하면, data들의 isDone 속성값의 변경이 적용되도록 한다.순서1_ App 컴포넌트에 수정 핸들러 작성=> setItems + items.map() + 핸들러의 매개인자 : targetID vs item의 id 비교 후,일치 => spread 문법 + 변경하고픈 프로퍼티값 toggle / 일치X => 그냥 반환const onChangeIsDone = (targetID)=>{ setItems(items.map((item)=>{ if(item.id===targetID){ return { ...item, isDone : !item.isD.. 2025. 1. 17.
(8).이정환_react.js강의_App컴포넌트의 items 객체의 배열을 List컴포넌트에 전달하여, 태그형태로 렌더링=>map()렌더링 , 검색기능 지난번까지 완성 코드 :- App.jsimport { useRef, useState } from "react";import "./Editor.css";function Editor({ onCreateItem }) { const [text, setText] = useState(""); const inputRef = useRef(); const onChangeInput = (event) => { setText(event.target.value); }; const onClickBtn = () => { if (text === "") { inputRef.current.focus(); return; //■순서1 } onCreateItem(text); setText.. 2025. 1. 16.
(7).이정환_react.js강의_ List에 입력 후, 추가 , 삭제 구현 초기 셋팅 1_ ★useState 초기화를 어디에 할지와 , 구성 전략 짜보기①. 가장 상위인 App 컴포넌트에 useState 선언, 초기화②. List를 삭제 , 편진 , 추가 하므로, 먼저, List의 구성을 파악한 뒤 , 객체 형태로 초기값 을 선언한다.- App.jsimport { useState } from "react";import "./App.css";import Editor from "./components/Editor";import Header from "./components/Header";import List from "./components/List";const mockData = [ { id: 0, isDone: false, content: "빨래하기", date: .. 2025. 1. 16.
(6).이정환_react.js강의_ React's LifeCycle과 역할, LifeCycle_Control방=>useEffect React's LifeCycle의 정의와 각 Cycle 단계마다 제어담당Mount -> Update(=ReRendering) -> UnMountReact's LifeCycle의 제어의 핵심은 useEffect로 다룬다.useEffect의 정의 :=> React에서 동작들에 따라 파생되는 효과 중 부작용을 제어하는 훅(Hook)이다.useEffect 실습하기1_ useEffect로 카운터 프로젝트에서 count값이 변경될때마다, console창에 count 값을 출력시켜보기- App.jsimport { useState, useEffect } from "react";//useEffect import 추가가import Controller from "./components/Controller";import Vi.. 2025. 1. 15.

티스토리툴바