본문 바로가기

노마드코더/REACT 크롬 앱12

CHROME APP componenet -Input.jsx -Button.jsx -Checkbox.jsx module -Login.jsx -Clock.jsx -Weather.jsx -ToDoList.jsx page -ChromeApp.jsx css -List.css img -1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg App.js component - import React from 'react' function Input({className, type, name, value, onChange, maxLength, placeholder, checked}) { return ( ) } export default Input component - import React from 'react' function But.. 2024. 2. 5.
11. 시간에 따른 Title ※시간에 따라 사용자에게 Title로 인사 하기 componenet -Input.jsx -Button.jsx -Checkbox.jsx module -Login.jsx -Clock.jsx -Weather.jsx -ToDoList.jsx page -ChromeApp.jsx css -List.css img -1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg module - import React, {useEffect, useState} from 'react' import '../css/List.css' import Input from '../component/Input' import Button from '../component/Button' function Login() { const checkU.. 2024. 2. 4.
10. 체크박스 체크 유무 확인 ※체크박스 체크 유무에 따라 할 일 완료 표시 componenet -Input.jsx -Button.jsx -Checkbox.jsx module -Login.jsx -Clock.jsx -Weather.jsx -ToDoList.jsx page -ChromeApp.jsx css -List.css img -1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg component - import React from 'react' function Input({className, type, name, value, onChange, maxLength, placeholder, checked}) { return ( ) } export default Input component - import React from '.. 2024. 2. 4.
9. 오늘의 할 일 추가, 삭제 오늘의 할 일을 todoList 형태로 만들어서 추가, 삭제 기능 구현 ※ToDoList 모듈 추가, Checkbox 컴포넌트 추가 ※map 함수를 이용해서 todoList 나타냄 -map(): 반복되는 컴포넌트를 렌더링 ※useRef 훅으로 todoList key 값 설정 -useRef : DOM에 접근하기 위해 사용 ※ filter 함수를 이용해서 일기 삭제 -filter() : 주어진 함수의 조건을 만족하는 배열의 요소들만 모아(true면 유지, false면 버림) 새로운 배열로 반환함. ※ diaryKey이 중복되지 않도록 localStorage에 diaryKey 저장 componenet -Input.jsx -Button.jsx -Checkbox.jsx module -Login.jsx -Clock.. 2024. 2. 3.

티스토리툴바