본문 바로가기

전체 글

 (39)
모던 JavaScript 정독하기 ✳️ 객체 : 기초 ✔️ 객체 - 객체 ✔️ 객체 - 참조에 의한 객체 복사 ✔️ 객체 - 가비지 컬렉션 ✔️ 객체 - 메서드와 'this' ✔️ 객체 - 'new' 연산자와 생성자 함수 ✔️ 객체 - 옵셔널 체이닝 '?.' ✔️ 객체 - 심볼형 ✔️ 객체 - 객체를 원시형으로 변환하기 ✳️ 자료구조와 자료형 ◼️ 원시값의 메서드 ◻️ 숫자형 ◼️ 문자열 ◻️ 배열 ◼️ 배열과 메서드 ◻️ iterable 객체 ◼️ 맵과 셋 ◻️ 위크맵과 위크셋 ◼️ Object.keys, values, entries ◻️ 구조 분해 할당 ◼️ Date 객체와 날짜 ◻️ JSON과 메서드 ✳️ 함수 심화학습 ✔️ 재귀와 스택 ✔️ 나머지 매개변수와 전개 문법 ✔️ 변수의 스코프 ✔️ 오래된 'var' ✔️ 전역 객체 ✔..
Step4. useReducer, edit, reset, checkMessage 지난번 check리스트 ✔️ 시작 날짜는 가져오지만, 수정은 못하게 하기... ✔️ reset 버튼 만들기 ✔️ 셀 클릭했을때 참 잘했어요 같은 메세지창이랑, 취소했을 때 경고창 만들기 ◻️ 30일 지났을 때 종료창 만들기 1. useReducer 관리할 state가 많아질 땐 useReducer를 사용하는 편이 좋다고 해서 사용해 봤다. 상태관리도 상태관리지만 개인적으론 action type을 정해서 state별로 관리하니깐 여기 저기 props로 안 해도 되고 좀 더 직관적이어서 더 편리했던거 같다. 아 근데 엄청 삽질했다. react는 불변성이 엄청 중요한데... switch문 쓸 때 ...state, 하나 빠뜨려서...........undefined투성이었지.... 초기 상태를 설정해준다. use..
step3. Cell Table + Counter 1. Cell click 이벤트 cell Component에서 Toggle기능을 구현했다. Cell을 클릭하면 done의 상태를 바꿔주고 App Component로 전달한다. const Cell = memo(({ days, onCountCell }) => { const [done, setDone] = useState(false); const onClickCircle = () => { setDone(prev => !prev) onCountCell(done); }; return ( {days} ) }); App 컴포넌트에서는 받아온 done을 가지고 counter 기능을 구현한다. 조건에 맞으면 대시보드의 카운터가 1씩 증가하고, 아니면 경고창이 뜨고, 확인을 누르면 카운터가 1 감소하면서 색도 지워진다. ..

티스토리툴바