๐ ๊ตฌํํ auth ํ์ด์ง ์์งค
๊ตฌํํ ๊ธฐ๋ฅ
TodoList ๋ถ๋ฌ์ค๊ธฐ
Todo ์ถ๊ฐ / ์ญ์ / ์์ / ์์ ์ทจ์ ๊ธฐ๋ฅ
๐ src ํด๋ ๊ตฌ์กฐ
todo ํด๋ ์์
Todos.js - TodoList.js - Todo.js ๋ก ๋๋์๋ ์ปดํฌ๋ํธ ์ค์์ ๋ฆฌํฉํ ๋งํ๋ฉฐ TodoList.js ๋ฅผ ์ง์ ๋ค. ๋ List๋ฅผ ์ด์ฉํด ์ปดํฌ๋ํธ๋ฅผ ํ๋ฒ ๋ ๋๋์์๋๋ฐ ๋จ์ props๋ง ๋๊ฒจ์ฃผ๋ ์ญํ ์ ๊ตณ์ด ํ์์๋ค๋ ๋๊ธฐ์ ํผ๋๋ฐฑ์ด ์์๊ธฐ ๋๋ฌธ!
๊ทธ๋ฆฌ๊ณ ๊ฐ๋ ์ฑ์ ์ํด todos.js์ axios๋ง ๋ฐ๋ก ๋ถ๋ฆฌํด API ํด๋๋ฅผ ๋ง๋ค์ด ์์ TodoAxios.js ๋ฅผ ๋ฃ์ด์ฃผ์๋ค
๐ ๋ฆฌํฉํ ๋งํ ์ฝ๋
์์ ์ปดํฌ๋ํธ
const Todos = () => {
// todo ์ถ๊ฐํ ๋ ์ฐ์ด๋ Input value state
const [todoInput, setTodoInput] = useState('');
// todo ๋ฐ์ดํฐ ๋ฐ๋ state
const [todos, setTodos] = useState([]);
const navigate = useNavigate();
const onChangeTodo = e => setTodoInput(e.target.value);
// todo ์ถ๊ฐ์
const plusTodo = async e => {
e.preventDefault();
const data = await TodoAxios.ADD(todoInput);
setTodos(pre => [...pre, data]);
setTodoInput('');
};
// ์ฒดํฌ๋ฐ์ค value
const checkboxHandler = checkedId => {
setTodos(pre =>
pre.map(({ id, isCompleted, todo, userId }) => {
if (id === checkedId) {
isCompleted = !isCompleted;
}
return { id, isCompleted, todo, userId };
})
);
};
// todo ์์ ๋ฒํผ์ ๋๋ฌ ์์ ๋ชจ๋๋ก ์ ํ, ํด๋น todo id๋ฅผ checkedId ๋ผ๋ ์ธ์๋ก ๋ฐ์ id ๊ฐ์ด ์ผ์นํ๋ todo์ ์ฒดํฌ๋ฐ์ค๋ input value๋ฅผ ๋ฐ๊ฟ
(๋ฐ์ดํฐ ํต์ โ)
const UpdateValue = (e, checkedId) => {
setTodos(pre =>
pre.map(({ id, isCompleted, todo, userId }) => {
if (id === checkedId) {
todo = e.target.value;
}
return { id, isCompleted, todo, userId };
})
);
};
// todo ์์ ๋ชจ๋์์ ์ ์ถ ๋ฒํผ ๋๋ฅผ์ ์๋, todos์์ ํด๋น id ๊ฐ์ ๋ฐ์ดํฐ ํต์
const TodoModify = async (e, checkedId, setToogle) => {
e.preventDefault();
const [targetValue] = todos.filter(({ id }) => id === Number(checkedId));
await TodoAxios.PUT(checkedId, targetValue.todo, targetValue.isCompleted);
setToogle(pre => !pre);
};
// todo ์์ ๋ชจ๋ ์๋ ๋ ์ญ์ ๋ฒํผ ๋๋ฅผ์ ์๋
const TodoDelete = async (e, checkedId, setToogle) => {
e.preventDefault();
await TodoAxios.DELETE(checkedId);
setTodos(prev => prev.filter(({ id }) => id !== Number(checkedId)));
setToogle(pre => !pre);
alert('์ญ์ ์๋ฃ');
};
// todo ์์ ๋ชจ๋์์ ์ทจ์๋ฒํผ ๋๋ ์ ๋ ์
๋ ฅํ ๊ฐ ์ฌ๋ผ์ง๊ฒ ํ๋ ํจ์
const TodoChange = (e, checkedId, setToogle, Ref) => {
e.preventDefault();
setTodos(prev =>
prev.map(({ id, userId, isCompleted, todo }) => {
if (id === checkedId) {
isCompleted = Ref.current[0];
todo = Ref.current[1];
Ref.current[1] = '';
}
return { id, userId, isCompleted, todo };
})
);
setToogle(pre => !pre);
};
//todo ๋ฐ์ดํฐ ๋ฐ์์ค๋ ํจ์
useEffect(() => {
TodoAxios.GET(navigate, setTodos);
}, [navigate]);
ํ์ ์ปดํฌ๋ํธ
const Todo = ({
todoItem,
checkboxHandler,
UpdateValue,
TodoModify,
TodoDelete,
TodoChange,
}) => {
// ๋ฐ์ดํฐ ๊ตฌ์กฐ๋ถํด ํ ๋น
const { id, todo, isCompleted } = todoItem;
// ์์ ๋ชจ๋ (๊ธฐ๋ณธ๊ฐ false)
const [toogle, setToogle] = useState(false);
// ๊ฐ์ ๋ฒํผ์ toogle ๊ฐ์ ์ด์ฉํด ์ฌ์ฌ์ฉ
const statusModify = toogle ? '์ ์ถ' : '์์ ';
const statusDelete = toogle ? '์ทจ์' : '์ญ์ ';
const Ref = useRef([]);
// todo ์
๋ ฅ์ฐฝ (์์ ๋ชจ๋๊ฐ ์๋๋ผ๋ฉด readOnly, ๋ง๋ค๋ฉด ์์ ๊ฐ๋ฅํ๋๋ก UpdateValue ํจ์๋ก ๊ฐ)
const inputProps = !toogle
? { readOnly: true }
: { onChange: e => UpdateValue(e, id) };
// ์์ ๋ชจ๋ ๊ฐ์ ๋ฐ๋ผ ์์ / ์ ์ถ
const TodoModifyProps = !toogle
? { // ์์ ๋ฒํผ์ ๋๋ ์ ๋๋ถํฐ์ ๊ฐ์ ์ ์ฅ (ํ์ ๊ทธ ๊ฐ๋ง ์ทจ์ํ๊ธฐ ์ํจ)
onClick: () => {
setToogle(true);
Ref.current[0] = isCompleted;
Ref.current[1] = todo;
},
}
: { // ์์ ํ ๊ฐ todo ์ ์ฒด๋ฅผ ๋ฐ์์ TodoModify ํจ์๋ก ์ธ์๋ฅผ ๋ณด๋
onClick: e => {
TodoModify(e, id, setToogle, todo);
},
};
// ์์ ๋ชจ๋ ๊ฐ์ ๋ฐ๋ผ ์ญ์ / ์ทจ์ (์์ ์ทจ์)
const TodoDeleteProps = !toogle
? { onClick: e => TodoDelete(e, id, setToogle) }
: {
onClick: e => {
TodoChange(e, id, setToogle, Ref);
},
};
์ด๋ฒ์ ์ ์ถํ๋ฉด์ ํ๋ฆฌ์จ๋ณด๋ฉ ๋ถ๊ณ ์ํ๋ ๋ชฉํ๋ ์์์ง๋ง
์ฝ๋ ํ๋ฆฌํฐ์ ์ ๊ฒฝ์ฐ๊ณ ์ state ์ฌ์ฉ์ ์ต๋ํ ์ค์ด๋ ค ๋ ธ๋ ฅํ๋ค
๋ฐ์ดํฐ ๋ฐ๋ state ์ธ์ ์ฐ์ง ์๊ณ ์ ๋ ธ๋ ฅํ๋๋ฐ ์์ ์ต๋ค๋ณด๋ ์ฌ์ค ๋ฆฌํฉํ ๋ง ์ ์๋ ์ด์ธ์๋ state ๊ฐ ๋ง์๋ค ๐ฅฒ
์ฒดํฌ๋ฐ์ค value ๋๋ฌธ์ ๊ณ ์์ ๋ง์ดํ๋๋ฐ
์์ ๋ชจ๋์์๋ง ์ฒดํฌ๋ฐ์ค๊ฐ ์์ ์ด ๋๊ณ ์ ์ถ ๋ฒํผ์ ๋๋ฌ์ผ ๊ฐ์ด ๋ค์ด๊ฐ ์กฐ๊ธ ์์ฝ๋ค
์ฒดํฌ ๋ฐ์ค ๋๋ฅผ ๋๋ง๋ค ๋ฐ์ดํฐ๊ฐ ๋ฐ๋๋ ๊ธฐ๋ฅ์ ๊ตฌํํด๋ณผ๊น ์๊ฐํ์ง๋ง ๋๋ฅผ ๋๋ง๋ค ๋ฐ์ดํฐ๊ฐ ์ค๊ฐ๊ณ ๋ค์ ๋ ๋๋ง ๋๋ ๊ฑด
๋นํจ์จ์ ์ด๋ผ ๋๊ปด ์์ง ๊ตฌํํ์ง ์์๋ค
์ด ์์ ์ผ๋ก ๋ ๋๋ง์ ๋ํด ๋ค์ ์๊ฐํด๋ณด๊ณ State ์ฌ์ฉ์ ์ด๋ป๊ฒ ํด์ผํ ์ง ๊ฐ์ด ์กฐ๊ธ์ ์กํ ๊ฑฐ ๊ฐ์ ๋ง์ด ๋ฐฐ์ ๋ค ์๊ฐํ๋ค
ํ์ ์ปดํฌ๋ํธ์ ์๋ props๋ฅผ ์์๋ก ๋์ด ๋ค์ ์ฌ์ฉํ๋ ๊ฒ๋ ์ฒ์์ด์๋๋ฐ ๊ฐ์ง ๊ฒฝํ์ด๋ผ ๋๋๋ค
์์ผ๋ก ์์ ํ๋ฆฌ์จ๋ณด๋ฉ ํ๋ก์ ํธ ๋ค์ด๊ฐ๊ธฐ ์ ์ ๋ณด๋ค ์ข์ ์ฝ๋๋ฅผ ๊ตฌํํด๋ด์ด์ ๋ฟ๋ฏํ๋ค
์๋ฒฝํ๊ณ ์ ์ฐ์ฌ์ง ์ฝ๋๋ผ๊ณค ํ ์ ์์ง๋ง ์ ๋ณด๋ค ๋ฐ์ ๋, ์ฑ์ฅํ๋ ๊ฐ๋ฐ์์ ํ ๋ฐ์ง ๋ ๋ค๊ฐ์ฐ๋ค ๋๋๋ค :)
๐ ๊นํ๋ธ ๋ ํฌ ๋งํฌ
https://github.com/Joeunji0119/wanted-pre-onboarding-frontend
'Wanted-pre-onboarding-7' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
์ํฐ๋ ํ๋ฆฌ์จ๋ณด๋ฉ ์ฌ์ ๊ณผ์ auth.js ๋ฆฌํฉํ ๋ง (2) | 2022.10.24 |
---|
๋๊ธ