mode 변경 기능 (컴포넌트 추가, onChangeMode 이벤트 추가(핸들러))

create, update는 a태그로 만들어지는것이 좋습니다. (새로운 창에서 데이터를 입력하고 조회하게 되므로.)

하지만, delete같은 경우, 새로운 창으로 연결되는 a태그로 만들지 않고 input button태그로 만드는것이 좋습니다.

 

 

 

1. Control이라는 컴포넌트로 만들어서 외부로 빼버릴겁니다.

그리고 그 컴포넌트를 App.js에 import한 후에 아까전에 위치한 자리에 <Control></Control> 컴포넌트를 추가해줍니다.

 

 

 

2. onChangeMode 이벤트(핸들러)를 Control컴포넌트에 정의해줍니다.

Control.js파일에서 onClick이벤트를 만들어 줄때, 이것이 create, update, delete라는것을 알려주어야 합니다.

이 onClick이벤트를 만든 함수를 받기 위해서 Control컴포넌트에 onChangeMode에는 _mode라는 매개변수로 받아주어야 합니다.

그럼 onChangeMode라는 핸들러에서는 _mode라는 값으로 현재상태를 알려주게 됩니다. (나중에 다른 mode값과 햇갈리게 하지 않기 위해서 다음과 같이 선언해줍니다.)

 

 

다음과 같이하면, 링크 선택에 따라서 mode값이 변경되는것을 확인 할 수 있습니다.