โ DiaryItem.js
์์ฑ๋๋ ๋ฆฌ์คํธ์ ์์ดํ ์ ๋ฒํผ์ ์ถ๊ฐ
const DiaryItem = ({ onRemove, author, content, create_date, emotion, id }) => {
const handleRemove = () => {
if (window.confirm(`${id}๋ฒ์งธ ์ผ๊ธฐ๋ฅผ ์ญ์ ํ๊ฒ ์ต๋๊น?`)) {
onRemove(id);
}
};
return (
<div className="DiaryItem">
<div className="info">
<span>
์์ฑ์ : {author} | ๊ฐ์ ์ ์ : {emotion}
</span>
<br />
<span className="date">{new Date(create_date).toLocaleString()}</span>
</div>
<div className="content">{content}</div>
<button onClick={handleRemove}>์ญ์ ํ๊ธฐ</button>
<button>์์ ํ๊ธฐ</button>
</div>
);
};
export default DiaryItem;
- ์ ๋ฐ์ ์ธ ๊ฐ๋
์ฑ์ ๊ณ ๋ คํด ๊ธฐ์กด
onRemove
ํจ์๋ฅผ return ์์ ๋ฐ๋ก ์ ์ ํ์์ต๋๋ค. - ์์ ํ๊ธฐ ๋ฒํผ์ ๋๋ฅด๋ฉด ์์ดํ ์ ๋ณธ๋ฌธ์ ์์ ํ ์ ์๋ form์ด ๋ํ๋์ผ ํฉ๋๋ค.
- ์ด ๋ถ๋ถ์ ํด๋น js ํ์ผ์ state ๋ก ๋ง๋ญ๋๋ค.
const [isEdit, setIsEdit] = useState(false);
boolean
ํ์ ์ผ๋ก ๊ฐ์ ๋ณด๊ด ํฉ๋๋ค.isEdit
์ ๊ฐ์ดTrue
๊ฐ ๋๋ฉด, ์์ ์ค์ผ๋ก ๊ฐ์ฃผํ์ฌ ๋ก์ง์ ๋ง๋ค๊ณisEdit
์ ๊ฐ์ดFalse
๊ฐ ๋๋ฉด, ๊ธฐ์กด ์ฒ๋ผ content ๋ฅผ ๋ณด์ฌ์ฃผ๋ฉด ๋ฉ๋๋ค.
const toggleIsEdit = () => setIsEdit(!isEdit);
toggleIsEdit
ํจ์๋ ํธ์ถ์ด ๋๋ ์๊ฐ ์๋isEdit
์ด ๊ฐ์ง๊ณ ์๋ ๊ฐ์ ๋ฐ์ ์ํต๋๋ค.- ์ฆ,
true -> false
๋กfalse -> true
toggleIsEdit
ํจ์๋ฅผ ๋ฒํผ์ ๋๋ฅด๋ฉด ์๋ ํ ์ ์๊ฒ ๋ฃ์ด์ค๋๋ค.
โ isEdit ์ ๊ฐ์ด True ๋ผ๋ ๊ฐ์ ์ผ๋ก ์์ ํผ์ ๋์ฐ๋ ์ฝ๋
- ๊ธฐ์กด
{content}
๋ฅผ ์ง์ฐ๊ณ ์ผํญ ์ฐ์ฐ์๋ฅผ ํ์ฉ ํฉ๋๋ค. - ์์ ํผ์ ์ ๋ ฅํ๋ ๋ฐ์ดํฐ๋ค๋ state ๋ก ํธ๋ค๋ง์ด ๊ฐ๋ฅํ๊ฒ ๋ง๋ญ๋๋ค.
import { useState } from 'react';
const DiaryItem = ({ onRemove, author, content, create_date, emotion, id }) => {
const handleRemove = () => {
if (window.confirm(`${id}๋ฒ์งธ ์ผ๊ธฐ๋ฅผ ์ญ์ ํ๊ฒ ์ต๋๊น?`)) {
onRemove(id);
}
};
const [isEdit, setIsEdit] = useState(false);
const toggleIsEdit = () => setIsEdit(!isEdit);
// ์์ ํผ์ ์
๋ ฅํ๋ ๋ฐ์ดํฐ๋ฅผ state ๋ก ํธ๋ค๋ง ํ๊ธฐ ์ํ ์ฝ๋
const [localContent, setLocalContent] = useState('');
return (
<div className="DiaryItem">
<div className="info">
<span>
์์ฑ์ : {author} | ๊ฐ์ ์ ์ : {emotion}
</span>
<br />
<span className="date">{new Date(create_date).toLocaleString()}</span>
</div>
<div className="content">
{isEdit ? (
<>
<textarea
value={localContent}
onChange={(e) => {
setLocalContent(e.target.value);
}}
></textarea>
</>
) : (
<>{content}</>
)}
</div>
<button onClick={handleRemove}>์ญ์ ํ๊ธฐ</button>
<button onClick={toggleIsEdit}>์์ ํ๊ธฐ</button>
</div>
);
};
export default DiaryItem;
โ ์์ ํ๊ธฐ ๋ฒํผ์ ๋๋ฅด๋ฉด ์๋์ ๋ฒํผ์ ๋ฐ๊พธ๋ ์ฝ๋
{isEdit ? (
<> // ์์ ์ค
<button onClick={toggleIsEdit}>์์ ์ทจ์</button> // isEdit = false ๊ฐ ๋๋ฉด ์์ ์ทจ์
<button>์์ ์๋ฃ</button> // ์์
</>
) : (
<>
<button onClick={handleRemove}>์ญ์ ํ๊ธฐ</button>
<button onClick={toggleIsEdit}>์์ ํ๊ธฐ</button>
</>
)}
โ ์์ ํผ์ด ์ด๋ฆฌ๋ฉด, ์๋ณธ content๋ฅผ ์์ ํ ์ ์๊ฒ ํ๊ธฐ
const [localContent, setLocalContent] = useState(content);
์๋์ ๊ฐ์ ๋ฌธ์ ๋ฅผ ํด๊ฒฐ ํ๊ธฐ ์ํด
const handleQuitEdit = () => {
setIsEdit(false); // ์์ ์ค์ธ ์ํ๋ฅผ ๋น ์ ธ ๋๊ฐ๊ธฐ ์ํด์
setLocalContent(content); //
};
<button onClick={handleQuitEdit}>์์ ์ทจ์</button>
โ ์์ ์๋ฃ ๋ฒํผ์ ๋๋ฅด๋ฉด ๊ทธ๋๋ก ์ ์ฅ
- React์ ํน์ง ์ค ๋ฐ์ดํฐ๋ ์์์ ์๋๋ก, ์ด๋ฒคํธ๋ ์๋์์ ์๋ก ์ฌ๋ผ๊ฐ๋๋ค.
- ์์ ์๋ฃ ์ด๋ฒคํธ๋ฅผ
DiaryItem
์์App.js
๊น์ง ์ ๋ฌํ๊ธฐ ์ํด์๋ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ง๊ณ ์๋App.js
์ปดํฌ๋ํธ์ ์์ ํ๋ ๊ธฐ๋ฅ์ ๋ง๋ค์ด์DiaryItem
๊น์ง ๋ณด๋ด์ค์ผ ํฉ๋๋ค.
์์ ํ๋ ๊ธฐ๋ฅ์ ํ๋ ํจ์
โ App.js
const onEdit = (targetId, newContent) => { // ์์ ๋์ ์์ด๋, ์์ ๋ ๋ด์ฉ
setData(
data.map((it) =>
it.id === targetId ? { ...it, content: newContent } : it
)
);
};
- ๋ฐ์ดํฐ์ ๊ฐ์ ๋ฐ๊พธ๋ฉด ๋ฉ๋๋ค.
map
์ ์ฌ์ฉํด์ ๊ฐ๊ฐ ๋ชจ๋ ์์๋ค์ด id ์ํ์ฌ ๋งค๊ฐ๋ณ์๋ก ์ ๋ฌ๋ฐ์ id
๊ฐ์์ง ๊ฒ์ฌ ํฉ๋๋ค.- id ๋ ๊ณ ์ ๊ฐ์ด๊ธฐ ๋๋ฌธ์ ํ๋ ๋ฐ์ ์กด์ฌ ํ ์ ์์ต๋๋ค.
- id ๊ฐ ์ผ์นํ๊ฒ ๋๋ฉด ํด๋น ์์๋ ์์ ๋์์ด ๋๋ ์์์ ๋๋ค.
- ๊ทธ๋ฆฌํ์ฌ ์๋ณธ ๋ฐ์ดํฐ๋ฅผ ๋ค ๋ถ๋ฌ์จ ๋ค์์
{ ...it }
content : newContent
๋ก ์ ๋ฐ์ดํธ ์์ผ์ฃผ๋ฉด ๋ฉ๋๋ค.- id ๊ฐ ์ผ์นํ์ง ์์ผ๋ฉด ์์ ๋์์ด ์๋์ด์
it
์ ๋ฐํ ํฉ๋๋ค. onEdit
ํจ์๋DataItem
์์ ๋ฐ์ํ๋ ์ด๋ฒคํธ์์ผ๋ก ๋ถ๋ชจ์ธDataList
๋ฅผ ๊ฑฐ์ณ๊ฐ์ผ ํฉ๋๋ค.
( ๋ฆฌ์คํธ ์ญ์ ํ๋ ๊ฒฝ์ฐ์ ๋์ผ )
โ DiaryItem.js
const handleEdit = () => {
if (localContent.length < 5) {
localContentInput.current.focus();
return;
}
if (window.confirm(`${id}๋ฒ ์งธ ์ผ๊ธฐ๋ฅผ ์์ ํ์๊ฒ ์ต๋๊น?`)) {
onEdit(id, localContent); // targetId, newContent ์ ์ ๋ฌํ ์ธ์
toggleIsEdit(); // ์์ ํผ์ ๋ซ์ต๋๋ค.
}
};
- ์์ ์๋ฃ ๋ฒํผ์ ํ์ํ ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌ ํ ํจ์๋ฅผ ํ๋ ๋ง๋ญ๋๋ค.
- ๊ทธ๋ฆฌ๊ณ , ์ ๋ ฅํ ๋ ์กฐ๊ฑด์ ๊ฑธ์ด๋์๊ธฐ ๋๋ฌธ์ ๊ทธ์ ๋ง๋ focus ์ ๊ฒ์ฌ๋ฅผ ํด์ผ ํฉ๋๋ค.
- useRef ๋ฅผ ์ฌ์ฉํ์ฌ
<textarea/>
ํ๊ทธ์ DOM ์ ๊ทผ
โ ์ฐธ๊ณ
'๐ Front-End > React.js' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
useEffect (0) | 2022.10.24 |
---|---|
React Lifecycle (0) | 2022.10.24 |
๋ฆฌ์คํธ ๋ฐ์ดํฐ ์ญ์ ํ๊ธฐ (0) | 2022.10.24 |
๋ฆฌ์คํธ ๋ฐ์ดํฐ ์ถ๊ฐํ๊ธฐ (0) | 2022.10.24 |
React - ๋ฆฌ์คํธ ๋ ๋๋ง ( ์กฐํ ) (0) | 2022.10.23 |
โ DiaryItem.js
์์ฑ๋๋ ๋ฆฌ์คํธ์ ์์ดํ ์ ๋ฒํผ์ ์ถ๊ฐ
const DiaryItem = ({ onRemove, author, content, create_date, emotion, id }) => {
const handleRemove = () => {
if (window.confirm(`${id}๋ฒ์งธ ์ผ๊ธฐ๋ฅผ ์ญ์ ํ๊ฒ ์ต๋๊น?`)) {
onRemove(id);
}
};
return (
<div className="DiaryItem">
<div className="info">
<span>
์์ฑ์ : {author} | ๊ฐ์ ์ ์ : {emotion}
</span>
<br />
<span className="date">{new Date(create_date).toLocaleString()}</span>
</div>
<div className="content">{content}</div>
<button onClick={handleRemove}>์ญ์ ํ๊ธฐ</button>
<button>์์ ํ๊ธฐ</button>
</div>
);
};
export default DiaryItem;
- ์ ๋ฐ์ ์ธ ๊ฐ๋
์ฑ์ ๊ณ ๋ คํด ๊ธฐ์กด
onRemove
ํจ์๋ฅผ return ์์ ๋ฐ๋ก ์ ์ ํ์์ต๋๋ค. - ์์ ํ๊ธฐ ๋ฒํผ์ ๋๋ฅด๋ฉด ์์ดํ ์ ๋ณธ๋ฌธ์ ์์ ํ ์ ์๋ form์ด ๋ํ๋์ผ ํฉ๋๋ค.
- ์ด ๋ถ๋ถ์ ํด๋น js ํ์ผ์ state ๋ก ๋ง๋ญ๋๋ค.
const [isEdit, setIsEdit] = useState(false);
boolean
ํ์ ์ผ๋ก ๊ฐ์ ๋ณด๊ด ํฉ๋๋ค.isEdit
์ ๊ฐ์ดTrue
๊ฐ ๋๋ฉด, ์์ ์ค์ผ๋ก ๊ฐ์ฃผํ์ฌ ๋ก์ง์ ๋ง๋ค๊ณisEdit
์ ๊ฐ์ดFalse
๊ฐ ๋๋ฉด, ๊ธฐ์กด ์ฒ๋ผ content ๋ฅผ ๋ณด์ฌ์ฃผ๋ฉด ๋ฉ๋๋ค.
const toggleIsEdit = () => setIsEdit(!isEdit);
toggleIsEdit
ํจ์๋ ํธ์ถ์ด ๋๋ ์๊ฐ ์๋isEdit
์ด ๊ฐ์ง๊ณ ์๋ ๊ฐ์ ๋ฐ์ ์ํต๋๋ค.- ์ฆ,
true -> false
๋กfalse -> true
toggleIsEdit
ํจ์๋ฅผ ๋ฒํผ์ ๋๋ฅด๋ฉด ์๋ ํ ์ ์๊ฒ ๋ฃ์ด์ค๋๋ค.
โ isEdit ์ ๊ฐ์ด True ๋ผ๋ ๊ฐ์ ์ผ๋ก ์์ ํผ์ ๋์ฐ๋ ์ฝ๋
- ๊ธฐ์กด
{content}
๋ฅผ ์ง์ฐ๊ณ ์ผํญ ์ฐ์ฐ์๋ฅผ ํ์ฉ ํฉ๋๋ค. - ์์ ํผ์ ์ ๋ ฅํ๋ ๋ฐ์ดํฐ๋ค๋ state ๋ก ํธ๋ค๋ง์ด ๊ฐ๋ฅํ๊ฒ ๋ง๋ญ๋๋ค.
import { useState } from 'react';
const DiaryItem = ({ onRemove, author, content, create_date, emotion, id }) => {
const handleRemove = () => {
if (window.confirm(`${id}๋ฒ์งธ ์ผ๊ธฐ๋ฅผ ์ญ์ ํ๊ฒ ์ต๋๊น?`)) {
onRemove(id);
}
};
const [isEdit, setIsEdit] = useState(false);
const toggleIsEdit = () => setIsEdit(!isEdit);
// ์์ ํผ์ ์
๋ ฅํ๋ ๋ฐ์ดํฐ๋ฅผ state ๋ก ํธ๋ค๋ง ํ๊ธฐ ์ํ ์ฝ๋
const [localContent, setLocalContent] = useState('');
return (
<div className="DiaryItem">
<div className="info">
<span>
์์ฑ์ : {author} | ๊ฐ์ ์ ์ : {emotion}
</span>
<br />
<span className="date">{new Date(create_date).toLocaleString()}</span>
</div>
<div className="content">
{isEdit ? (
<>
<textarea
value={localContent}
onChange={(e) => {
setLocalContent(e.target.value);
}}
></textarea>
</>
) : (
<>{content}</>
)}
</div>
<button onClick={handleRemove}>์ญ์ ํ๊ธฐ</button>
<button onClick={toggleIsEdit}>์์ ํ๊ธฐ</button>
</div>
);
};
export default DiaryItem;
โ ์์ ํ๊ธฐ ๋ฒํผ์ ๋๋ฅด๋ฉด ์๋์ ๋ฒํผ์ ๋ฐ๊พธ๋ ์ฝ๋
{isEdit ? (
<> // ์์ ์ค
<button onClick={toggleIsEdit}>์์ ์ทจ์</button> // isEdit = false ๊ฐ ๋๋ฉด ์์ ์ทจ์
<button>์์ ์๋ฃ</button> // ์์
</>
) : (
<>
<button onClick={handleRemove}>์ญ์ ํ๊ธฐ</button>
<button onClick={toggleIsEdit}>์์ ํ๊ธฐ</button>
</>
)}
โ ์์ ํผ์ด ์ด๋ฆฌ๋ฉด, ์๋ณธ content๋ฅผ ์์ ํ ์ ์๊ฒ ํ๊ธฐ
const [localContent, setLocalContent] = useState(content);
์๋์ ๊ฐ์ ๋ฌธ์ ๋ฅผ ํด๊ฒฐ ํ๊ธฐ ์ํด
const handleQuitEdit = () => {
setIsEdit(false); // ์์ ์ค์ธ ์ํ๋ฅผ ๋น ์ ธ ๋๊ฐ๊ธฐ ์ํด์
setLocalContent(content); //
};
<button onClick={handleQuitEdit}>์์ ์ทจ์</button>
โ ์์ ์๋ฃ ๋ฒํผ์ ๋๋ฅด๋ฉด ๊ทธ๋๋ก ์ ์ฅ
- React์ ํน์ง ์ค ๋ฐ์ดํฐ๋ ์์์ ์๋๋ก, ์ด๋ฒคํธ๋ ์๋์์ ์๋ก ์ฌ๋ผ๊ฐ๋๋ค.
- ์์ ์๋ฃ ์ด๋ฒคํธ๋ฅผ
DiaryItem
์์App.js
๊น์ง ์ ๋ฌํ๊ธฐ ์ํด์๋ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ง๊ณ ์๋App.js
์ปดํฌ๋ํธ์ ์์ ํ๋ ๊ธฐ๋ฅ์ ๋ง๋ค์ด์DiaryItem
๊น์ง ๋ณด๋ด์ค์ผ ํฉ๋๋ค.
์์ ํ๋ ๊ธฐ๋ฅ์ ํ๋ ํจ์
โ App.js
const onEdit = (targetId, newContent) => { // ์์ ๋์ ์์ด๋, ์์ ๋ ๋ด์ฉ
setData(
data.map((it) =>
it.id === targetId ? { ...it, content: newContent } : it
)
);
};
- ๋ฐ์ดํฐ์ ๊ฐ์ ๋ฐ๊พธ๋ฉด ๋ฉ๋๋ค.
map
์ ์ฌ์ฉํด์ ๊ฐ๊ฐ ๋ชจ๋ ์์๋ค์ด id ์ํ์ฌ ๋งค๊ฐ๋ณ์๋ก ์ ๋ฌ๋ฐ์ id
๊ฐ์์ง ๊ฒ์ฌ ํฉ๋๋ค.- id ๋ ๊ณ ์ ๊ฐ์ด๊ธฐ ๋๋ฌธ์ ํ๋ ๋ฐ์ ์กด์ฌ ํ ์ ์์ต๋๋ค.
- id ๊ฐ ์ผ์นํ๊ฒ ๋๋ฉด ํด๋น ์์๋ ์์ ๋์์ด ๋๋ ์์์ ๋๋ค.
- ๊ทธ๋ฆฌํ์ฌ ์๋ณธ ๋ฐ์ดํฐ๋ฅผ ๋ค ๋ถ๋ฌ์จ ๋ค์์
{ ...it }
content : newContent
๋ก ์ ๋ฐ์ดํธ ์์ผ์ฃผ๋ฉด ๋ฉ๋๋ค.- id ๊ฐ ์ผ์นํ์ง ์์ผ๋ฉด ์์ ๋์์ด ์๋์ด์
it
์ ๋ฐํ ํฉ๋๋ค. onEdit
ํจ์๋DataItem
์์ ๋ฐ์ํ๋ ์ด๋ฒคํธ์์ผ๋ก ๋ถ๋ชจ์ธDataList
๋ฅผ ๊ฑฐ์ณ๊ฐ์ผ ํฉ๋๋ค.
( ๋ฆฌ์คํธ ์ญ์ ํ๋ ๊ฒฝ์ฐ์ ๋์ผ )
โ DiaryItem.js
const handleEdit = () => {
if (localContent.length < 5) {
localContentInput.current.focus();
return;
}
if (window.confirm(`${id}๋ฒ ์งธ ์ผ๊ธฐ๋ฅผ ์์ ํ์๊ฒ ์ต๋๊น?`)) {
onEdit(id, localContent); // targetId, newContent ์ ์ ๋ฌํ ์ธ์
toggleIsEdit(); // ์์ ํผ์ ๋ซ์ต๋๋ค.
}
};
- ์์ ์๋ฃ ๋ฒํผ์ ํ์ํ ์ด๋ฒคํธ๋ฅผ ์ฒ๋ฆฌ ํ ํจ์๋ฅผ ํ๋ ๋ง๋ญ๋๋ค.
- ๊ทธ๋ฆฌ๊ณ , ์ ๋ ฅํ ๋ ์กฐ๊ฑด์ ๊ฑธ์ด๋์๊ธฐ ๋๋ฌธ์ ๊ทธ์ ๋ง๋ focus ์ ๊ฒ์ฌ๋ฅผ ํด์ผ ํฉ๋๋ค.
- useRef ๋ฅผ ์ฌ์ฉํ์ฌ
<textarea/>
ํ๊ทธ์ DOM ์ ๊ทผ
โ ์ฐธ๊ณ
'๐ Front-End > React.js' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
useEffect (0) | 2022.10.24 |
---|---|
React Lifecycle (0) | 2022.10.24 |
๋ฆฌ์คํธ ๋ฐ์ดํฐ ์ญ์ ํ๊ธฐ (0) | 2022.10.24 |
๋ฆฌ์คํธ ๋ฐ์ดํฐ ์ถ๊ฐํ๊ธฐ (0) | 2022.10.24 |
React - ๋ฆฌ์คํธ ๋ ๋๋ง ( ์กฐํ ) (0) | 2022.10.23 |