본문 바로가기

React9

react delete https://www.youtube.com/watch?v=OZPRKFqPWG4&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=11 delete 버튼 추가 newTopics 배열을 생성하고 for 문을 만들어 기존의 topics.length 만큼 반복을 돌리고 topics[i].id !== id가 다르면 그 topics[i]를 new Topics.push 해준다 즉 delete 버튼을 클릭하기 전에 삭제할 글을 클릭하여 topics[i].id안에 해당 삭제할 topics의 id 값을 넣고 delete버튼을 클릭하면 해당 topic이 new topics안에 들어가고 setTopics안에 삭제할 topic이 들어있는 newTopics를 매개변수로 넣으면 해당 글이 삭제된다 .. 2023. 5. 29.
react update https://www.youtube.com/watch?v=bW_WOrYzVWw&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=10 ul li태그로 목록화 let contextControl = null; 로 잡고 contextControl Update 을 넣서 mode==='READ' 일때 Update을 보이도록 한다 ㅇ /update/ +id를 해준다 UPDATE를 onclick할때 setMode함수에 'UPDATE'를 매개변수로 준다 setMode가 mode로 가고 만일 mode가 'UPDATE'일때 실행할 함수 Update를 정의하고 props.onUpdate(title,body)를 해서 title과 body값을 넘겨준다 title과 body값을 받고 onUpdat.. 2023. 5. 18.
React create https://www.youtube.com/watch?v=kctNCMFxciQ&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=10 Create a 태그를 만들고 event.preventDefault();를 만들어준다 onclick 했을때 페이지 넘어가므로 방지하기 위해서 event.preventDefault(); setMode를 CREATE로 바꿔준다 setMode에 CREATE가 들어왔으므로 mode에 CREATE가 들어온다 mode에 CREATE가 들어오면 Create 태그를 추가해준다 Create 함수를 정의해준다 onsubmit submit을 클릭 했을때 자동으로 페이지가 넘어가는것을 방지 하기 위해 event.preventDefault를 해준다 event.ta.. 2023. 5. 15.
React state https://www.youtube.com/watch?v=vmunrKR0uOU&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=7&ab_channel=%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9 conste mode= 'WELCOME';으로 하고 let content = null; 하고 만일 mode === 'WELCOME'이라면 content = 태그를 둔다 그리고 {content}를 두면 바뀐다 react state import{useState} from 'react';로 react에서 제공하는 state를 import 한다 기존의 welcome에서 useState('WELCOME');으로 바꿔준다 useState란배열이며 배열의 0번째는 상태의.. 2023. 5. 2.