React - 수정모드

리액트(React), 레코드 폼과 레코드 리스트로 컴포넌트 분리
를 fork 해서
- NumberRecordListItem 분리 [O] // 값들 나눠주는거

- 수정 버튼 넣기 [O] 
>{editModeStatus ? editView : readView}

- 수정 버튼 누르면 다시 일반모드로 변경 [O] 
> 수정모드랑 일반모드
> editModeStatus 가 t이면 editView, f이면 readView (useState(false)기본)

- 수정모드에서 input 만들기 [O]
> <input type="number" placeholder="숫자입력해줘!!!!!"/>

- 수정모드에서 input 값 변경 가능하도록 [ ]
> const [inputNumberValue, setInputNumberValue] = useState(number);
> input에 들어갈 값을 지정하려고! 기본을 number로 넣어줘!
> 수정된 값을 바꾸기 위해서 input값이 바뀌는 이벤트를 넣어줘
> onChange={(e) => setInputNumberValue(e.target.value)}

- 수정 완료 누르면 원래 보이던 값이 변경되도록 [ ]

- 수정시 음수 금지 [O]
> 수정 input에 min을 0으로 줘(화살표로)
> if (modifiedNumber < 0 ) { // 0보다 작으면
        setInputNumberValue("0"); // input값 0으로 만들어~
    } else { setRecordNums(recordNums.map((_number,_index) => _index == index ? inputNumberValue : _number));
	setEditModeStatus(false);}

- 수정 취소시 input 값을 초기화 [O]
> setInputNumberValue(number);
> 원래 값으로 돌려줘!

 

↓

console.clear();

import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";

const NumberRecorderForm = ({ num, setNum, saveNumber, clearNumbers }) => {
	return (
		<>
			<div>
				<span>숫자 : {num}</span>
				&nbsp;
				<button onClick={() => setNum(0)}>취소</button>
			</div>
			<div>
				<button onClick={() => setNum(num + 1)}>증가</button>
				&nbsp;
				<button
					onClick={() => {
						num == 0 ? setNum(0) : setNum(num - 1);
					}}
				>
					감소
				</button>
				&nbsp;
				<button onClick={saveNumber}>기록</button>
				&nbsp;
				<button onClick={clearNumbers}>전체기록삭제</button>
			</div>
		</>
	);
};
const NumberRecorderList = ({ recordNums, setRecordNums, removeNumber }) => {
	return (
		<>
			<div>
				{recordNums.length == 0 ? (
					<span>기록 없음</span>
				) : (
					<>
						<h5>기록</h5>
						<ul>
							{recordNums.map((number, index) => (
								<NumberRecorderListItem
									key={index}
									number={number}
									recordNums={recordNums}
									setRecordNums={setRecordNums}
									index={index}
									removeNumber={removeNumber}
								/>
							))}
						</ul>
					</>
				)}
			</div>
		</>
	);
};

const NumberRecorderListItem = ({
	index,
	number,
	recordNums,
	setRecordNums,
	removeNumber
}) => {
	const [inputNumberValue, setInputNumberValue] = useState(number);
	const [editModeStatus, setEditModeStatus] = useState(false);

	const modifyNumber = () => {
		if (number == inputNumberValue) return;
		
		if (inputNumberValue == ''){
			setInputNumberValue(number);
		}
		
		const modifiedNumber = parseInt(inputNumberValue);
		
    if (modifiedNumber < 0 ) {
        setInputNumberValue("0");
    } else { setRecordNums(recordNums.map((_number,_index) => _index == index ? inputNumberValue : _number));
		setEditModeStatus(false);
		}
	};
	
	const modifycancelNumber = () => {
		setInputNumberValue(number);
		
		setEditModeStatus(false);
	};

	const readView = (
		<>
			<button onClick={() => setEditModeStatus(true)}>수정</button>
		</>
	);

	const editView = (
		<>
			<input
				type="number"
				placeholder="숫자 써"
				min="0"
				value={inputNumberValue}
				onChange={(e) => setInputNumberValue(e.target.value)}
			/>
			&nbsp;
			<button onClick={modifyNumber}>수정 완료</button>
			&nbsp;
			<button onClick={modifycancelNumber}>수정 취소</button>
		</>
	);

	return (
		<>
			<li>
				<span>
					{index + 1}번 : {number}
				</span>
				&nbsp;
				<button onClick={() => removeNumber(index)}>삭제</button>
				&nbsp;
				{editModeStatus ? editView : readView}
			</li>
		</>
	);
};

const App = () => {
	const [num, setNum] = useState(0);
	const [recordNums, setRecordNums] = useState([10, 20, 30]);

	const saveNumber = () => {
		setNum(0);
		setRecordNums([...recordNums, num]);
	};

	const removeNumber = (index) => {
		setRecordNums(recordNums.filter((_, _index) => _index != index));
	};

	const clearNumbers = () => {
		setRecordNums([]);
	};

	return (
		<>
			<NumberRecorderForm
				num={num}
				setNum={setNum}
				saveNumber={saveNumber}
				clearNumbers={clearNumbers}
			/>
			<NumberRecorderList
				recordNums={recordNums}
				setRecordNums={setRecordNums}
				removeNumber={removeNumber}
			/>
		</>
	);
};

ReactDOM.render(<App />, document.getElementById("root"));​