Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- addEventListener
- https://m.blog.naver.com/tt2t2am1118/221010125300
- js
- https://youtube.com/playlist?list=PLuHgQVnccGMA5836CvWfieEQy0T0ov6Jh&si=FTaYv8m21EhO-A2K
- sql
- object
- JS #프로젝트
- callback
- database
- 동기
- ajax
- execCommand
- setTimeout()
- webpack
- 비동기
- 참고블로그
- slow and steady
- Import
- prj
- Porject
- 게임
- Project
- async
- mysql
- eport
- promise
- 혼프
- json
- db
- await
Archives
- Today
- Total
C-log
⚛️React : section10 - Delete 본문
728x90
마지막으로 우리는 Delete를 구현할 것이다. 그러기 위해서는 기존에 update부분에서 delete를 추가할 것이다. 이전에는 a태그를 사용했지만 이번에는 우리가 페이지를 새로 생성하거나 불러오는 것이 아니기때문에 input태그로 버튼을 구현 할 것이다. 따라서 contextControl변수에서 값을 수정하면 된다. 아래 코드를 살펴보자.
contextControl = <>
<li><a href={"/update/" + id} onClick={event => {
event.preventDefault();
setMode('UPDATE');
}}>Update</a></li>
<li><input type="button" value="Delete" onClick={() => {
const newTopics = [] //비어있는 배열 값을 넣어준다.
for (let i = 0; i < topics.length; i++) {
if (topics[i].id !== id) {
newTopics.push(topics[i])
}
}
setTopics(newTopics);
setMode('WELCOME')
}} /></li>
</>
<></>이 태그는 비어 있는 태그이지만 update와 delete태그들을 묶어주기 위함이다. 이에 따라서 onClick함수를 보면 newTopics는 비어있는 배열값을 정의하고 newTopics를 if를 통해서 setId가 선택 되어 있는 id를 뺀 나머지 값들을 newTopics배열에 push로 넣어두고 이를 다시 setTopics로 새로 정의하는 것이다. 예를 들어 css를 지운다면 js와 html만 있는 것이다.
Delete는 update에 비해서 매우 쉽다. 이 수업에서 가장 중요한건 Nav를 통해 useState를 활용한 부분이다. 만약 수업에 이해가 잘 가지 않는 다면 useState의 수업을 다시 듣기를 추천한다.
728x90
'⚛️React > ⚡ver.0' 카테고리의 다른 글
⚛️React : training - 버튼과 컴포넌트 (0) | 2024.01.18 |
---|---|
⚛️React : training - Calcualte 시작하기 앞서 (0) | 2024.01.18 |
⚛️React : section09 - Update (0) | 2024.01.15 |
⚛️React : section08 - Create (0) | 2024.01.14 |
⚛️React : section07 - state (0) | 2024.01.12 |
Comments