일기장을 수정
※true, false에 따라 수정 textarea, 수정/적용 버튼 나타내기
※ map 함수를 이용해 지정한 id에 content만 변경
component
-Input.JSX
-Button.JSX
-Textarea.JSX
-DiaryWrite.JSX
-DiaryBlock.JSX
module
-Diary.JSX
css
-Diary.css
component - <DiaryBlock.JSX> : 수정 textarea 나타내기
import React, {useState} from 'react'
import '../css/Diary.css'
import Button from './Button'
import Textarea from './Textarea'
function DiaryBlock({title, content, id, deleteDiary, editDiary}) {
const [editBool, setEditBool] = useState(true) //수정 textarea 유무
const [editValue, setEditValue] = useState(content) //수정 textarea에 content 값 적용
const changeEditValue = event => { //수정 입력값 지정
setEditValue(event.target.value)
}
const handleDelete = () => {
deleteDiary(id)
}
const handleEdit = () => { //버튼 클릭하면 일기 수정
if (editBool === true) {
setEditBool(false)
} else {
setEditBool(true)
editDiary(id, editValue) //일기 수정
}
}
return (
<div className="blockDiv" key={id}>
<div className="blockTitleDiv">
<h3 className="blockTitle">{title}</h3>
<Button className={'deleteButton'} onClick={handleDelete} name={'삭제'} />
<Button
className={'editButton'}
onClick={handleEdit}
name={editBool ? '수정' : '적용'}
/>
</div>
<p>
---------------------------------------------------------------------------------------------
</p>
{editBool ? (
<p>{content}</p>
) : (
<Textarea
className={'writeContentTextarea'}
value={editValue}
onChange={changeEditValue}
/>
)}
</div>
)
}
export default DiaryBlock
Diary.css
.deleteButton {
font-size: 15px;
padding: 3px 10px 3px 10px;
margin-right: 10px;
margin-top: 10px;
background-color: rgb(211, 211, 211);
}
.editButton {
font-size: 15px;
padding: 3px 10px 3px 10px;
margin-right: 30px;
margin-top: 10px;
background-color: rgb(211, 211, 211);
}
module - <Diary.JSX> : map 함수를 이용해 지정한 id에 content만 변경
import React, {useEffect, useRef, useState} from 'react'
import DiaryWrite from '../component/DiaryWrite'
import DiaryBlock from '../component/DiaryBlock'
function Diary() {
const [diary, setDiary] = useState(JSON.parse(localStorage.getItem('Diary')) || [])
const diaryKey = useRef(parseInt(localStorage.getItem('DiaryKey')) || 0)
const addDiary = (title, content) => {
const newDiary = {
title,
content,
id: diaryKey.current
}
diaryKey.current += 1
setDiary([newDiary, ...diary])
}
const deleteDiary = id => {
const remainDiary = diary.filter(remove => remove.id !== id)
setDiary(remainDiary)
}
const editDiary = (id, editContent) => { //수정 함수
setDiary(diary.map(edit => (edit.id === id ? {...edit, content: editContent} : edit)))
//해당 ID의 content 값만 변경
}
useEffect(() => {
localStorage.setItem('Diary', JSON.stringify(diary))
localStorage.setItem('DiaryKey', parseInt(diaryKey.current))
})
return (
<div>
<div>
<DiaryWrite addDiary={addDiary} />
</div>
<div>
{diary.map(diaryData => {
return (
<DiaryBlock
key={diaryData.id}
{...diaryData}
deleteDiary={deleteDiary}
editDiary={editDiary} //일기 수정
/>
)
})}
</div>
</div>
)
}
export default Diary
수정 버튼을 클릭하면 수정 textarea가 뜸
적용 버튼을 클릭하면 일기 내용이 수정
'개인 공부 > 게시판' 카테고리의 다른 글
6. 모달 창 구현 (0) | 2024.02.10 |
---|---|
5. 카테고리, 작성 날짜 (0) | 2024.01.31 |
3. DeleteDiary, diaryKey 값 유지 (0) | 2024.01.29 |
2. AddDiary (0) | 2024.01.29 |
1. Diary Input, Block (0) | 2024.01.28 |