728x90

localstorage 2

ToDoList에 localstorage 만들기

localstorage를 이용하면 된다는것은 알겠는데 어떻게 사용해야 하는지 몰라 헤매던 끝에 방법을 찾았다..! window로도 불러오고 별짓 다했는데 소용이 없었다. 물론 내가 잘못사용해서 그런걸지도... npm문서를 읽어보다 react 전역라이브러리 중 하나인 recoil을 이용하기로 했다 recoil- persist !! 사용방법도 나 같은 초보자가 적용하기에 엄청 쉽다..! # localstorage 데이터를 만들고 새로고침을하면 localstorage에 저장된 데이터가 불러져 나온다. F12 개발자 도구 => Application => Local Storage 로 가면 key와 value값으로 저장 된다는것을 알 수 있다. # recoil을 이용해 state 저장하기 우선 atom에 persi..

Frontend/React 2023.01.31

(7) React - ToDo list 만들기

# frame input에 내용을 입력하면 list에 추가되는 형식으로 만들것. list 옆에 삭제 버튼도 구현할것이다. # 순서 input에 입력할 todo와 입력된 todo에 관한 state를 만든다. state는 string으로 처음에 빈문자열로 받을것이다. 그리고 return문에 div와 input을 만든다. 이 input의 type은 text이고 placeholder도 만들어준다. 그리고 list를 추가할 button도 하나 만들어준다. input의 value는 todo로 받을 것이고 , onchange이벤트를 하나 만들어서 input의 입력값이 변하면 받을 함수를 만든다. onchange함수는 event가 발생하면 setTodo함수가 실행된다. 이 setTodo함수는 input에 입력받은 값이..

Frontend/React 2023.01.04
728x90