240129 월 TIL ✍
저번주에도 my todo list 과제를 하고나서 따로 개선해보고. 과제 답안과도 비교해보며 또 새로 배우고 -
베이직반 2차 과제로도 기존 내 my todo list 페이지를 보완해야 했었다.
component를 분리했던 방식도, 좀 더 세분화해서 컴포넌트화해줬다. 그 과정에서 props 등 새로 다시 내려줌
또 이번에는 움짤로 만들어 보았따 !!
생각보다 만들기 어려웠다.. obs스튜디오로 직접 화면녹화하고 또 잘라서 gif로 변환하고,
gif변환 사이트 프로그램도 어떤 건 안되고 어떤 건 화질이 너무 안좋게 나오고 (내가 하는 법을 잘 몰라서인걸지도)..
여튼 그래도 GifCam 프로그램 (가볍고 간편한 무료 gif짤 생성 프로그램인데, 기존의 동영상을 변환하지는 못하고, 바로 캡쳐,녹화?하는 식으로 생성한다. 근데 용량,프레임에 비해 화질 안깨지고 잘 나옴!!) 을 통해 완성 !!!
(+ vercel을 통한 리액트 사이트 배포 - URL : https://my-to-do-list-ecru.vercel.app/)
저번 글에서 말했듯 전반적으로 useState hook 과, 컴포넌트 분리 및 props 내려주는 방식에 초점을 맞추고 과제를 했다.
실제 과제를 하면서 실습해보니 헷갈리는게 더 생기고, 쉽지 않았다 ㅠㅠ
하지만 한번 하고 다시 보완해가면서.. 컴포넌트 구조 그림도 그려가며 복습하니까 이제 컴포넌트 분리와 props 사용은 감이 잡혔다.
- 근데 은근 useState 사용이 헷갈린다. 이걸 state 를 써야할지 모르겠는 부분도 있었다.
상태가 바뀌는 것, '렌더링' 되는 것에 써야한다는 사실은 알지만.
(과제 처음에 하면서 done도 useState로 쓰려고 했었닷..)
* 추가하기 버튼
- 이 과제에서는 title, content, deadline, sortOrder를 state로 썼다.
그럼 input태그를 통해 받는 value값을, useState를 통해 선언한 set..메서드를 써서 event.target.value 와 같이 가져와서 setting해주면 된다. (이를 통해 '추가하기' 버튼 기능 구현!)
아래 예시와 같이! (input태그에서 value와 onChange 속성은 짝꿍처럼 생각하기!)
const [title, setTitle] = useState("");
// input의 value값 가져오기
// 아래 함수는 input태그의 onChange 속성에 넣어줄 함수
const handleTitleInputChange = (event) => {
setTitle(event.target.value);
};
- 그리고 고유한 id 부여를 해야할 경우에는 , Date.now() 등도 있지만,
저번에 배운 crypto.randomUUID() 기억 잘해두고 써먹자! ! (대신 보안이 불안정? 안좋은 환경에선 잘 안될 수 있다고)
* 삭제 버튼
- 삭제 버튼 기능도 잘 동작하는데, 짤이 없닷...ㅎ 귀찮으니 패스..
삭제 버튼 기능은 todolist에 filter 배열 메서드를 통해, 삭제버튼을 누른 해당 카드의 id와 일치하는 todo만 빼고 나머지를 배열에 담아 다시 setting (useState통해) 해줌으로써 작동시켰다.
- 이 과제에서는 title, content, deadline, sortOrder를 state로 썼다.
그럼 input태그를 통해 받는 value값을, useState를 통해 선언한 set..메서드를 써서 event.target.value 와 같이 가져와서 setting해주면 된다. (이를 통해 '추가하기' 버튼 기능 구현!)
아래 예시와 같이! (input태그에서 value와 onChange 속성은 짝꿍처럼 생각하기!)
* 완료, 완료 취소 버튼
- 어려웠고 처음에 구현하지 못했던.. 완료, 완료취소 버튼 기능 ㅠㅠ
아래와 같이 보완을 했다.
완료 <-> 완료 취소 ! toggle식으로 반대로- 전환해주면 된다고 생각하니 생각보다 간단했다.
기존의 todolist 항목들을 map으로 돌리고, 하나씩 뽑은 todo 중에서..
인자로 받은 id와 todo의 id가 일치하는 경우, isDone(완료) 키 부분에 대한 밸류값만 변경해주면된다. 반대로 (!)
(여기서 주의할게, {...todo, } 부분! 스프레드(전개)연산자 (...) 로 꼭 나머지 객체 부분을 풀어준 후에 isDone에 대한 밸류값을 변경해줘야한다. 그냥 isDone: ~ 만 달랑 쓰면 안됨)
// Done 완료&완료취소 버튼 (토글)=> 해당id의 todo 의 key값, isDone의 value값을 false <-> true 로 변경해야
const onToggleTodoItem = (id) => {
// 개선: 위와 마찬가지로 set..()안 콜백함수 /
setTodoList((prevTodos) =>
prevTodos.map((todo) => {
if (todo.id === id) {
return { ...todo, isDone: !todo.isDone };
}
return todo;
})
);
};
* 마감일 설정과 선택 x 시 '미정' 처리
- 마감일은 선택 안한 경우 '마감일 미정'으로 뜨게 했다.
또 마감일 설정은 input type="date" 로 설정해서, 다른 제목,내용 input과 마찬가지로 value, onChange 속성을 활용하고 useState를 통해 가져온 value값을 setting해주는 식으로 했다.
그리고
(입력받은 deadline_state 넘겨받은) TodoItem.jsx에서 카드 상에 마감일 나타낼 때는 아래처럼 코드를 써서 return문 안에서 {deadlineText} 를 써줬다.
(근데 아직 date객체.. 메서드 활용법은 확실히 잘 모르겠는데, 여튼 다른 year, day보다도- month에서 "long"을 꼭 써줘야만 년-월-일 한글로 잘 떴다.)
let dateDeadline = "";
let deadlineText = "";
if (!deadline) {
// 넘겨받은 deadline이 없는 경우
deadlineText = "마감일 미정";
} else {
dateDeadline = new Date(deadline).toLocaleDateString("ko-KR", {
year: "2-digit", // '24년'
month: "long",
day: "numeric",
});
deadlineText = dateDeadline + "까지";
}
* 마감일 순으로 정렬하기 (빠른 순, 느린 순 - 오름차, 내림차순)
- 마감일 순으로 오름차순, 내림차순 정렬하기 기능은 구현은 했는데.. 사실 좀 헷갈려서 다시 봐야 할 거 같다.
힌트를 참고해서 한거라 .. 😹
글고 일단 헷갈리는게, 날짜 가까운일 -> 먼 일 이 '빠른 순' 인데, 이게 오름차순이 아닌가? 했지만, 아래처럼 desc로 value값을 받고 sort메서드 쓴게 .. 빠른 순이라서. 흠 헷갈린다. 강의도 다시 들어봐야..
여기서 sortOrder 을 state로서 선언하고.. 다른 input과 마찬가지로 value값을 받아서 setting해준다.
(이 경우 드롭다운 메뉴의 select 태그에서 option 설정되었을 때 value를 받는다)
일단 sort, 배열 정렬 메서드가 아직 헷갈려서..공부해야할거같다.
그리고 주석에도 썼듯이, 약간의 문제가 남아있다.
처음에 드롭다운 메뉴로 뜨는 '빠른 순'을 먼저 택하면 안 먹힌다거나,
마감일 미정 시 그 카드들은 아예 순서 정렬에서 무시가 되기때문에.. 다른 카드들은 정렬순으로 움직이는데 걔네만 망부석처럼 제자리에 있어서ㅋㅋ ㅠㅠ 차라리 한 쪽으로 몰아주는 식으로 정렬하도록 바꿔야 할 거 같다.
// todoItem 정렬하는 함수
// 미완성 -> ? / 작동하지만 처음에 '빠른순'을 먼저 택하면 안먹힘 (느린순했다가 눌러야)
// 그런데 오름차순 asc가 마감일 느린순?
// 마감일 입력x로 미정시, 그 카드들은 순서정렬자체가 안되는 문제 (그대로있음)
const sortTodoItems = (order) => {
const newOrderDeadline = [...todoList].sort((a, b) => {
if (sortOrder === "asc") {
// 다시 체크
return new Date(a.deadline) - new Date(b.deadline);
} else {
// else안써도?
return new Date(b.deadline) - new Date(a.deadline);
}
});
// setSortOrder(newOrderDeadline); 작동하는데 셀렉트박스 눌린게 고정안됨
setTodoList(newOrderDeadline); // 정렬된 todoitem으로 todolist 상태 업데이트
};
...
return (
{/*내림차순 눌렀을때 잘 작동하지만 input선택해도 입력창안바뀜*/}
<section className="order-section">
<h3 className="orderTitle">마감일 순으로 보기</h3>
<select value={sortOrder} onChange={handleSortOrderChange}>
{/*드롭다운 목록*/}
<option value="desc">빠른 순</option>
<option value="asc">느린 순</option>
</select>
</section>
...'Today what I Learned _TIL' 카테고리의 다른 글
| [개인 Project] styled components 방식으로 스타일링 하고 컴포넌트 재분리 (1) | 2024.02.02 |
|---|---|
| [React] "styled-components" 패키지로 CSS in JS 방식의 스타일 부여하기 (1) | 2024.02.01 |
| [Algorithm_JS] 정수 내림차순으로 배치하기 (2) | 2024.01.28 |
| [Algorithm_JS] 프로그래머스 문제풀이 : 정수 제곱근 판별 (1) | 2024.01.26 |
| [React] CRA 보다 빠른 Vite로 React 프로젝트 생성하기 (0) | 2024.01.24 |