git 연습도 할 겸 새로운 branch를 생성해서 작업할 거예요 Context를 사용하기 위해 TodoContext 컴포넌트를 생성합니다. TodoList 관련 모든 컴포넌트를 관리하는 최상위 컴포넌트인 Home.jsx에서 TodoContext를 import 하고 TodoContext.Provider로 Context를 사용할 컴포넌트들을 감싸줍니다. 우선 Modal 컴포넌트 하나만 예시로 들겠습니다. Modal 컴포넌트에 전달되던 'modalHandler'를 Provider의 value 값으로 넣어줍니다. Modal 컴포넌트로 넘어가서, Context로부터 데이터를 불러오는 useContext를 사용합니다. 그리고 TodoContext로부터 값을 불러올 것이기에 TodoContext를 인수로 넣어줍니다..

https://studysmart.tistory.com/94 투두리스트 오류 탐험기(id 중복을 피하자!) 문제점! 이전에 로컬스토리지에 저장을 해놨기에, 새로고침을 해도 투두리스트가 그대로 유지된다. 문제점은 새로고침을 한 이후부터이다. 새로고침 이후, 네 번째를 추가했다. 그리고 첫 번째 studysmart.tistory.com 지난 글에서 삭제버튼 클릭 시 id가 중복되는 사례를 해결했었습니다. 하지만 드로그 앤 드롭 적용 이후에 또 다른 문제가 생겼습니다. 문제점이다! 다음과 같이 3개의 todo를 만들면 id가 0번부터 큰 문제없이 잘 생성됩니다. 하지만 드래그 앤 드롭을 통해 다음과 같이 세 번째 투두를 제일 위로 올리고, 새로운 투두를 생성하면! 다음과 같이 id가 중복되게 됩니다. 원인은 ..

투두리스트에 적힌 일들을 전부 마무리했을 때, 약간 성취감을 느낄 수 있는 장치가 필요했습니다. 그래서 모달창을 활용해서 간단한 완료 모달을 구현해 봤습니다. 갤럭시 노트를 통해, 모달창에 들어갈 그림을 우선 그렸습니다. 고양이가 사자로 성장한다는 컨셉입니다. 모달창 구현 순서는 다음과 같습니다. 1. 최상위 컴포넌트에서 useState를 통해 on/off 기능을 할 변수를 선언. 이후 관련 핸들러를 구현현다. 2. 모달 컴포넌트 생성 3. todoList에서 완료한 todo가 1개 이상이고, 미완료 todo가 0개일 때 모달창을 띄울 수 있는 버튼 구현 4. 최종 CSS 적용 5. 모달창 구현 1. 최상위 컴포넌트에서 useState를 통해 on/off 기능을 할 변수를 선언. 이후 관련 핸들러를 구현..

https://studysmart.tistory.com/97 리액트 드래그 앤 드롭(DND) https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API https://aurigait.com/blog/drag-and-drop-in-react-without-using-any-external-library/ 위의 두 개 사이트를 참고하며 드래그 앤 드롭을 정리했다. https://inpa.tistory.co studysmart.tistory.com 이 글 그대로 적용했기에, 특별하게 추가되는 내용 없이 간략하게 적용하는 것만 썼다. 프로젝트의 계층 구조는 대략 이렇게 되어 있다. Home.jsx에 핸들러를 생성하고 props를 통해 드래그 이벤트..

‘공부하기’를 수정하려고 할 때, ‘공부하기’가 그대로 출력되면 더 편할 것 같다는 의견을 받았다! 지금은 수정을 누르면 기존의 값이 초기화되고 placeholder를 통해서만 보인다. 이걸 수정해서, 공부하기가 그대로 남아있게 바꿔볼 것이다. 우선 input에 값이 입력되는 흐름을 보자 첫 번째로 newTodo는 빈 값으로 초기화 되어있다. input의 기본 값인 value 값에 newTodo를 적용했고, newTodo는 공백이기에 이론상 input 태그에는 아무것도 입력될 수 없다. 하지만 입력이 잘 이뤄진다. 이유가 뭘까 onChangeEditTodo 핸들러를 통해 input에 입력되는 값을 추적하고, setNewTodo를 통해 newTodo에 업데이트시켜 주기 때문이다. 즉 a를 입력하면 newT..

문제점! 이전에 로컬스토리지에 저장을 해놨기에, 새로고침을 해도 투두리스트가 그대로 유지된다. 문제점은 새로고침을 한 이후부터이다. 새로고침 이후, 네 번째를 추가했다. 그리고 첫 번째를 수정하면.. 네 번째도 같이 수정되는 오류가 발생한다. 원인 찾기 혹시 Storage에 잘못저장되기에 데이터가 꼬이나?라고 생각하기에는 너무 명확하게 의심되는 부분이 있었다. 내가 todo 아이템을 추가할 때, id 값을 단순히 useRef를 통해 제공했기 때문이다. 그렇기에 새로고침을 했을 때, useRef가 초기화되어서 다시 0이 되고, 기존의 투두리스트는 유지되지만 id가 중복되게 되는 것이다. 해결인 줄 알았으나....! localStorage의 value 값에 있는 객체의 개수를 받아오면 되지 않을까 라는 생각..