리액트6 react Native 투두리스트 기본적인 UI를 짜고 기능을 추가해보았다 . 첫 번째 추가 기능 구현 const [todos, setTodos] = useState([]); const [text, setText] = useState(); const newTodo = { id: Date.now(), isEdit: false, text, isDone: false, category, }; const addTodo = () => { setTodos((prev) => { return [...prev, newTodo]; }); setText(""); }; 추가될 newTodo라는 새로운 객체를 만든다 만든 후 addTodo 변수를 만들어 setTodo를 이용하요 기존에 있던 todos 에 넣는다 setText 는 입력후 - 인풋창을 비.. 2023. 1. 2. react Native react Native란 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리 React.js + React-dom ⇒ Web App react Native 플랫폼에 구애받지않는다 ! 웹개발에 모바일 어플리케이션 다 사용가능 react Native란 모바일 어플리케이션을 만들수 있는것 리엑트네이티는 1.Saving cost- 비용절감이 가능하다! 안드로이드 -> ios -> 한번에 개발이 가능 따로따로 구할 필요없음 -그걸로 만들어진것들 인스타 테슬라 페이스북 스카이프 등등 대부분 서비스들을 다 만들수있다 . 리엑트 네이티브 구조 export default function App() { return ( ); } 기본적으로 태그자체 이름이 다른것들이 많고 스타일 컴포넌트로 많이 나눠났다. .. 2022. 12. 30. 완료,삭제 기능 구현 저번에 만들던 투두리스트에서 삭제기능과 완료기능 , 취소 기능을 구현해 보았다 export default function TodoList({ todos, isActive, setTodos }) { const todoBox = { border: "1px solid black", padding: "20px" }; return ( {isActive === true ? "해야 할 일" : "완료 한 일 "} {todos .filter((item) => item.isDone === !isActive) .map((item) => { return ; })} ); } 기존에 있는 투두리스트에서 투두로 컴포넌트로 나누었다. export default function Todo({ setTodos, isActive, ite.. 2022. 12. 16. WIL 6주차.. Facts -리액트 -Map -Filter Feelings - 자바스크립트 문법 지식이 부족하여서 리액트를 공부하는데 큰 어려움이 있다 ㅠㅠ Finding -Map의 활용 -Filter의 활용 -투두리스트 만둘기 Future -리액트 강의 수강 -자바스크립트 문법 강의 수강 -알고리즘 문제 2022. 12. 12. 이전 1 2 다음
