React/Keeper-app | To-Do-app clone10 [Keeper-app 6] Material icon입력과 에니메이션 Material UI 앱에 스타일을 더 추가해보자. Material UI 다운 받는다. https://mui.com/material-ui/getting-started/installation/ npm install @mui/material @emotion/react @emotion/styled Material icon 다운 npm install @mui/icons-material Note에 있는 DELETE 글자를 아이콘으로 바꿔보자. 원하는 아이콘을 찾은 다음 (아이콘보기) 아이콘을 클릭해 주소를 복사한 후 Note에 import 한다. 원하는 자리에 형태로 입력한다. 모양이 바뀐 것을 볼 수 있다. Keerper에 Hightlight 아이콘 넣기 Highlight 아이콘을 검색한 후 태그 안에 넣는다... 2022. 4. 18. [Keeper-App 5] 선택 아이템 지우기 Note 컴포넌트에 DELETE 버튼이 있다. 이 버튼을 눌렀을 때 App.js에 id를 받아 delete 함수를 실행 시킬 것이다. property로 이 deleteNote 함수를 보내준다. 클릭 했을 시 onDelete() 함수가 호출 되도록 한다. 이제는 deleteNote 함수에서 아이템을 삭제하는 작업을 한다. 이미 가지고 있는 노트들(prevNotes)들 중에서 보내준 id에 해당하는 아이템을 뺀다. 그리고 나머지 prevNotes들을 다시 정렬한다. filter를 사용하여 id에 해당하는 index를 제외한 나머지 아이템들을 array에 다시 정렬하라고 하였다. 하지만 아직 에 id가 설정되어 있지 않다. 에 id를 설정해 주자. Note 컴포넌트에 가서 클릭된 아이템의 id를 deleteN.. 2022. 4. 17. [Keeper-App 4] notes array 만들어 노트 map()으로 돌리기 이제는 들어오는 note들을 담을 state를 만들어 보자. notes들을 담을 useState를 설정한 후 버튼 클릭 되었을 때 note가 addNote함수로 들어오면 array 안에 쌓이도록 작업한다. array에 있는 아이템을 map()으로 돌린다. 입력한 내용이 잘 나오는 것을 볼 수 있다. 하지만 입력한 내용이 사라지지 않고 있다. 내용 입력 후 버튼 눌렀을 때 note가 다시 리셋 되도록 한다. 내용 입력 후 자동으로 내용이 없어지는 것을 볼 수 있다. 2022. 4. 17. [Keeper-App 3] CreateArea 컴포넌트 만들기 CreateArea 컴포넌트 새로 만들기 import React from 'react'; function CreateArea() { return ( Add ) } export default CreateArea; useState를 만든다. input과 textarea에 value를 추가해 준다. handleChange 함수를 추가한다 input에 내용을 입력하면 저장을 한다. 오브젝트를 return 하는 거라 return { } 로 써줘야 한다. 내용을 입력하면 state 안에 내용이 나오면 오케이 버튼 눌렀을 때 내용이 입력될 수 있도록 해보자. 일단 onClick으로 submitNote 함수가 호출 되도록 한다. 그런데 버튼을 누르면 다시 메세지창이 리셋이 되는데 그 것을 막기 위해 event를 통과시.. 2022. 4. 17. [To-Do App] 최종 | input 부분 컴포넌트로 빼기 이제는 input과 button을 묶어 컴포넌트로 따로 빼보자. 현재 App.js 코드는 다음과 같다. Input과 관련된 내용을 InputArea로 옮긴다. import React, { useState } from "react"; import ToDoItem from "./ToDoItem"; function App() { const [inputText, setInputText] = useState(""); const [items, setItems] = useState([]); function handleChange(event) { var newValue = event.target.value; setInputText(newValue); } function addItem() { setItems((prevI.. 2022. 4. 16. [To-Do App] 아이템 지우기 | 앞 포스트에서 아이템을 클릭하면 취소선이 그어지는 것을 연습했다. 이제는 다른 컴포넌트의 array에 있는 아이템을 지우는 법에 대해 알아보자. 시작 코드 App.js import React, { useState } from "react"; import ToDoItem from "./ToDoItem"; function App() { const [inputText, setInputText] = useState(""); const [items, setItem] = useState([]); function handleChange(event) { const newValue = event.target.value; setInputText(newValue); } function addItem() { setItem((.. 2022. 4. 16. [To-Do App] 취소선 긋기 | Component Tree | stateless component 컴포넌트 분리 시키기 앞에서 작성한 코드는 App.js에 모든 코드가 다들어가있다. 이 To-Do-List 는 크게 3가지 div로 나눠져 있다. 1. heading 섹션 2. input+button 3. list 1, 2번은 그대로 두고 3번 안에서도 list를 컴포넌트로 만들어 보자. a Item 컴포넌트만 따로 빼보기 여기서 우선 {todoItem}만 따로 떼서 컴포넌트로 만들어보자. 파일 만들기 App.js에도 빈자리에 태그로 자리를 채워준다. 여기서 todoItem을 받아서 내용을 넘겨야 한다. ToDoItems 파일에 내용 적어준다. 아이템들이 잘 나오는 것을 볼 수 있다. Props는 Read Only 로 Modify 되지 않음 여기서의 ToDoItem 컴포넌트를 stateless compo.. 2022. 4. 6. [To-Do App] 시작 다음과 같은 To-Do List를 만들어 보자. 시작 코드 index.html styles.css body { background-color: #ffeaa7; min-height: 70vh; padding: 1rem; box-sizing: border-box; display: flex; justify-content: center; align-items: center; color: hsl(198, 1%, 29%); font-family: "Architects Daughter", cursive; text-align: center; font-size: 130%; } .container { width: 100%; height: auto; min-height: 500px; max-width: 500px; min-.. 2022. 4. 5. [Keeper-app 2] 모든 오브젝트 메모지에 나오게 하기 아래 처럼 notes.js에 있는 오브젝트 내용 메모지에 모두 다 보이게 하기 Note.jsx 파일 , 안 내용을 바꿔준다. import React from "react"; function Note(props) { return ( {props.title} {props.content} ); } export default Note; Notes.js 오브젝트 파일 const notes = [ { key: 1, title: "Delegation", content: "Q. How many programmers does it take to change a light bulb? A. None – It’s a hardware problem" }, { key: 2, title: "Loops", content: "How .. 2022. 3. 16. [Keeper-App 1] 시작 | rfce | 이전 포스트에서 강사님이 제공해준 기본 코드를 다운받아 vscode에서 여는 것을 해보았다. 일단 해당 파일로 들어가서 npm 실행으로 리액트까지 다운 받는다. cd 파일명 npm install npm start 이제는 리액트 코드를 짜보자. App.jsx 또는 App.js Airbnb 가이드에서 추천하고 Atlassian, Bitbucket등 다른 파일들을 사용하고 App.jsx로 했을 때 텍스트 에디터에서 색깔도 잘 맞게 배정이되서 App.jsx로 쓰자는 쪽이 있으나 리액트 앱을 위한 기능의 관점에서 자바스크립트 파일처럼 App.js를 많이 쓰고 있다. 강의를 듣는 지금 2022년은 App.js를 쓴다. 컴포넌트 트리 만들기 파일 만들고 rfce 누르면 보일러 템플릿 만들어진다. App.js Head.. 2022. 2. 21. 이전 1 다음
