728x90

react tutorial 2

React App Delete 기능 구현하기

React App Delete 기능 구현하기 Create, Update에 이어서 마지막 Delete 기능을 구현해 보자. 일반적으로 Delete 버튼은 Update 버튼과 함께 있다. 게시판 상세 페이지에 수정, 삭제 버튼이 있듯이. 이전 글에서 mode state가 'READ'일 때 Update 버튼을 추가했다. 이전 글 2023.06.21 - [JS] - React App Update 기능 구현하기 mode state가 'READ'일 때, 즉 상세 페이지를 확인할 때 Update 버튼 아래에 'Delete' 버튼을 추가한다. 삭제 버튼의 기능을 추가한다. 삭제(Delete) 기능은 Create, Update와 비교하면 비교적 간단하다. 구현 방법은 다양하겠지만 위 코드는 다음과 같다. 빈 배열 new..

JS/react 2023.06.22

React App Create 기능 만들기

React App Create 기능 만들기 현재 필자는 생활코딩 React를 보고 학습 내용을 작성하고 있다. 이 글을 쓰기 전까지 React의 Component, Props, Event, State에 대해서 알아보았다. 이번에는 응용 편이라고 할 수 있겠다. React App Create 기능 만들기 먼저 App.js 파일의 App 컴포넌트의 컴포넌트 배치 부분에서 본문이 보여지는 곳 아래에 Create 버튼(a tag)을 만들었다. 그리고 다른 a 태그들과 같이 기본 event는 막도록 하였다. 그리고 Header나 Nav 컴포넌트의 메뉴 리스트를 클릭했을 때 mode state가 변경되었던 것처럼, Create에서도 mode를 변경해 준다. 다른 화면을 띄우기 위해 mode를 변경하는 코드를 추가한..

JS/react 2023.06.21
728x90