본문 바로가기

분류 전체보기268

(10).이정환_react.js강의_useReducer정의 useReducer 정의 :useState와 비슷한 기능이지만, 컴포넌트 내에서만 구현해야되는 useState의 한계점을 보완하여, useReducer를 컴포넌트에서 dispatch로 알린뒤 , 구체적인 기능, 구현 내용을 컴포넌트에 외부에 기재하여 , 코드 가독성을 높여준는 Hook중 하나이다.실습 내용 ; useReducer로 counter 구현순서1_ 컴포넌트 내에서, state 변수, dispatch , useReducer() 객체 생성const [state, dispatch] = useReducer(reducer , 0);// state : 사용할 State 변수//dispatch : useReducer 와 state 변수를 사용하겠다고 알리는 통보 , 전달자//useReducer 객체 : 매개.. 2025. 1. 17.
(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.

티스토리툴바