[react] create - mode 변경

natural_min·2021년 11월 2일
0

React_생활코딩

목록 보기
13/20

create, update, delete 부분을
Control 컴포넌트로 묶어본다.

App.js)

App.js에 Control태그를 두고 onChangeMode라는 속성을 부여한다.
onChangeMode 속성 안에 함수를 두고 this.setState를 두고
매개변수에 해당하는 mode를 가져올 수 있는 이벤트를 설치한다.

control.js)

Control.js render 함수 안에 구현할 ul - li - a태그를 넣고
li태그 속 a링크를 클릭할 때의 이벤트를 만들어야하므로
a태그 안에 onClick 속성을 넣어준다.
onClick속성 안에 e.preventDefault()를 넣은 후
App.js의 Control의 onChangeMode 매개변수를 각각
'create', 'update' 등을 넣어준다.
매개변수에 맞는 mode를 불러오기 위한 조작장치이다.

delete의 경우, a태그를 가급적 지양한다. 경우에 따라
웹사이트 내 미리 방문하는 프로그램을 설치할 시,
미리보기하다가 삭제도 함께 진행될 수 있기 때문이다.
delete는 input태그를 활용해준다.

결과를 확인해보자.
각각 클릭하면서 mode 속성이 알맞게 바뀌는지 확인한다.

create를 클릭 시

update 클릭 시

delete 클릭 시

생활코딩 참고

19.2. create 구현 : mode 변경 기능

0개의 댓글