[React] CRU 기능 보완, delete 기능 구현, Redux의 개념

서론

저번 글만 해도 create, read, update 이 세 가지의 기능만 구현했었다.

그래서 오늘은 이전 기능을 조금 보완하고, 마지막 delete 기능을 구현할 것이다.

또, 책에서 배운 redux의 개념을 적어놓으려고 한다!

 

무엇을 보완할까?

원래 내가 만든 웹에서 create를 하거나 update를 해서 submit 버튼을 누르면 페이지가 그대로 create/update 화면을 보여줬었다. 근데 이러기보다 create/update를 하고나서 바로 그 content를 보여주는 게 훨씬 편할 것이다.

그래서 이번 글에선 create/update를 하고, create/update가 된 content를 보여주는 것을 구현할 것이다.

 

App.js

먼저 mode가 create일 때 setState 함수를 이용해 content를 만들고, 다시 mode를 read로 바꿔준다.

또, 그 content를 읽어야하기 때문에 selected_content_id를 max_content_id(만든 content의 id)로 설정한다.

 

그 다음 mode가 update일 때도 마찬가지로 setState 함수를 이용해 mode를 read로 바꿔준다.

다만, update는 "원래 있던" content를 선택하고 수정하는 것이기 때문에 selected_content_id를 바꿔줄 필요가 없다.

 

기능을 보완한 후 모습

 

delete는 어떻게 구현하나요?

CRUD 중 delete는 매우 쉽다고 할 수 있다. (개인적 의견)

선택된 id를 찾고, 메서드를 이용해 그 id의 content를 지우면 끝이기 때문. 아무튼 만들어보자.

App.js

일단 Control.js는 원래 mode를 바꿔주는 역할을 했었다. 그래서 이 mode가 delete가 됐을 때 특별한 행동을 취하면 된다.

mode가 delete라면 confirm을 한다. 이 confirm으로 사용자가 확인을 누르면 true를, 취소를 누르면 false를 반환한다.

confirm이 true면 _contents에 원래 배열을 복제하고, 선택된 content의 id와 _contents[i]의 id가 같으면 i를 splice로 없앤다.

그리고 setState를 이용해 mode를 다시 welcome으로 바꾸고, contents의 내용을 _contents(삭제된 배열)로 바꾼다.

그럼 끝! 매우 간단하쥬?

 

마지막으로 Redux의 간단한 개념!

우리가 이때까지 사용한 react는 상위 컴포넌트가 하위 컴포넌트로 또 하위 컴포넌트의 하위 컴포넌트로 ... 이런 식의 계층 구조를 사용하여 만들었었는데, redux는 하나의 데이터 저장소를 중앙에 만들고 모든 컴포넌트를 그 데이터 저장소와 직접적으로 연결한다. 그래서 그 저장소의 데이터가 변화되면 모든 컴포넌트도 변한다.

연결이 직접적으로 되니 더 빨라지고, 데이터 교환도 원활하게 될 것이당

 

CRUD 완성본!

 

담소

오늘은 기숙사 마지막날이라서 짐 싸느랴 공부할 시간이 많이 없었다. 그래도 드디어 한 챕터를 끝내서 엄청 뿌듯하다!!

이제 곧 방학인데, 방학이 되면 html, css, js 복습도 하고 react 공부도 많이 할 예정이다!

아무래도 바닐라 js 공부를 많이 해야 할 듯..? vue도 해보고 싶긴 하다. next가 요즘 뜨는 추세라 해서 관심이 조금 생겼다.

아무튼! 다음 글에서 봅슈

 

고칠 점이나 오류가 있다면 편하게 댓글 달아주세요 :)