$$config title: New Title111 keywords: - IT - ... $$ $$ppt title: 리액트란?? # 개요--o--CLASS=h1-border-none text-center # 핵심요약--o--CLASS=h1-border-none text-center # 리액트란--o--CLASS=h1-border-none text-center # 코드 ```js import React, { useState } from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; const NumberRecorderListItem = ({ index, number, removeRecord, modifyRecord }) => { const [inputNumberValue, setInputNumberValue] = useState(number); const [editModeStatus, setEditModeStatus] = useState(false); return (

{index + 1}번 숫자 : {editModeStatus ? ( <> setInputNumberValue(e.target.value)} min="1" max="100" /> ) : ( <> {number} )}

); }; const NumberRecorderList = ({ numbers, removeRecord, modifyRecord }) => { if (numbers.length == 0) { return

기록이 없습니다.

; } return ( <>

기록

))}

); }; const NumberRecorderForm = ({ number, setNumber, saveRecord, clearRecords }) => { return ( <> 숫자 : {number}

); }; const App = () => { const [number, setNumber] = useState(0); const [numbers, setNumbers] = useState([10, 4, 5, 33]); const saveRecord = () => { if (number == 0) return; setNumbers([...numbers, number]); setNumber(0); }; const modifyRecord = (index, newNumber) => { const newNumbers = numbers.map((_number, _index) => _index != index ? _number : newNumber ); setNumbers(newNumbers); }; const clearRecords = () => { setNumbers([]); }; const removeRecord = (index) => { setNumbers(numbers.filter((_number, _index) => index != _index)); }; return ( <>

); }; ReactDOM.render(, document.getElementById("root")); ``` $$