[React] create, update, delete 버튼을 누르면 state 값 변경하기

서론

이번 글은 오늘 데이터톤도 있고, 시간이 없어서 다음 글을 위한 작은 기능을 만들어보겠다.

일단 이제 저번 글까지 만들었던 웹 페이지에 create(생성), update(수정), delete 버튼(삭제)을 만들어

HTML, CSS, JavaScript li에 create로 추가하고 update로 수정하고 delete로 삭제하는 기능을 만들 예정이다.

 

그래서 이번 글은 create, update, delete를 눌렀을 때 mode의 state값이 각각 create, update, delete로

바뀌게끔 만들 것이다.

 

App.js

일단 create, update, delete 버튼이 들어가있는 Control 컴포넌트를 만든다.

그리고 각각을 눌렀을 때 Control 컴포넌트에서 넘겨준 _mode값을 setState함수로 state의 mode값으로 바꿔준다.

 

Control.js

Control.js 파일을 만들어 Subject.js를 복붙한다.

그리고 ul,li를 return하는데, 클릭했을 때(onClick) 하위 컴포넌트라서 state값을 바꾸지 않기 때문에 이벤트로 바꿔준다.

 

이제 state(mode)를 바꾸는 건 쉽다. (아닌가?)

다음 글은 아마 바뀐 state값으로 input 태그, li추가 등을 해야할 것이다. 사실상 이게 제일 어려움

다음 배우는 것까지 해보고 응용해서 To do list도 만들어보고 싶다.