React - 일반모드, 토글모드

console.clear();

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

const ArticleDetail = ({ id }) => {
	
	const [editModeStatus, setEditModeStatus] = useState(false);
	
	const title = "1번 글 제목";
	const body = "1번 글 내용";
	
	if(editModeStatus){
		return (
			<>
				<form>
				<div>수정모드</div>
				<span>번호</span>
				&nbsp;
				<span>{id}</span>
				<div>
					<span>제목</span>
					&nbsp;
					<input type="text" placeholder="제목 입력해" />
				</div>
				<div>
					<span>내용</span>
					&nbsp;
					<input type="text" placeholder="내용 입력해" />
				</div>
				<div>
					<button type="button" onClick={() => {setEditModeStatus(false)}}>수정완료</button>
					&nbsp;
					<button type="button" onClick={() => {setEditModeStatus(false)}}>수정취소</button>
				</div>
			</form>
			</>
		);
	};
	
	return (
		<>
			<h3>{id}번 게시물</h3>
			<div>제목 : {title}</div>
			<div>내용 : {body}</div>
			<button onClick={() => {setEditModeStatus(true)}}>수정</button>
			<hr />
		</>
	);
};

const App = () => {
	return (
		<>
			<ArticleDetail id={1} />
		</>
	);
};

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

• 조건문을 editModeStatus가 true면 <form>의 return 내용을 나타나게해
• editModeStatus의 true 값은 수정눌렀을때 setEditModeStatus에 true값을 줌!
• 수정취소 누르면 원래의 폼으로 돌아가도록 setEditModeStatus에 false값을 줌!

 

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={() => setNum(num - 1)}>감소</button>
				&nbsp;
				<button onClick={saveNumber}>기록</button>
				&nbsp;
				<button onClick={clearNumbers}>전체기록삭제</button>
			</div>
		</>
	);
};
const NumberRecorderList = ({ recordNums, removeNumber }) => {
	return (
		<>
			<div>
				{recordNums.length == 0 ? (
					<span>기록 없음</span>
				) : (
					<>
						<h5>기록</h5>
						<ul>
							{recordNums.map((number, index) => (
								<NumberRecorderListItem
									key={index}
									number={number}
									index={index}
									removeNumber={removeNumber}
								/>
							))}
						</ul>
					</>
				)}
			</div>
		</>
	);
};

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

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

	const editView = (
		<>
			<input type="number" placeholder="숫자 써" min="0" />
			&nbsp;
			<button onClick={() => setEditModeStatus(false)}>수정 완료</button>
			&nbsp;
			<button onClick={() => setEditModeStatus(false)}>수정 취소</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} removeNumber={removeNumber} />
		</>
	);
};

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

• {editModeStatus ? editView : readView} -> editModeStatus가 true면 editView, false면 readView
• readView -> 읽기모드, 수정버튼 보이기
• editView -> 수정모드, 수정할수 있는 모양(수정 입력란, 완료, 취소) 

 

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, removeNumber }) => {
	return (
		<>
			<div>
				{recordNums.length == 0 ? (
					<span>기록 없음</span>
				) : (
					<>
						<h5>기록</h5>
						<ul>
							{recordNums.map((number, index) => (
								<NumberRecorderListItem
									key={index}
									number={number}
									index={index}
									removeNumber={removeNumber}
								/>
							))}
						</ul>
					</>
				)}
			</div>
		</>
	);
};

const NumberRecorderListItem = ({ index, number, removeNumber }) => {
	const [inputNumberValue, setInputNumberValue] = useState(number);
	const [editModeStatus, setEditModeStatus] = useState(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={() => setEditModeStatus(false)}>수정 완료</button>
			&nbsp;
			<button onClick={() => setEditModeStatus(false)}>수정 취소</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} removeNumber={removeNumber} />
		</>
	);
};

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

• <button onClick={() => { num == 0 ? setNum(0) : setNum(num - 1); }}> 감소 </button> -> 음수가 안되도록 num값이 0일땐 -1을 안시켜!
• editView 에서 onChange={(e) => setInputNumberValue(e.target.value)}를 추가 -> 값이 바뀌는이벤트(e), 변경된 값ㄱ으로 set시켜줌!