10] React Update & Delete

1. update 구현

update의 기능은 read+create기능이다.
update는 기존의 컨텐츠를 불러와서 내용을 추가해주는 과정이기 때문이다.

먼저 form 기능이 구현되어있는 CreateContent컴포넌트를 복사하여 외부파일로 만들어주고,
UpdateContent로 이름지어준다.
다음으로 App.js에서 mode가 update로 바뀌면 Update컴포넌트로 바꾸어주기 위해
Create때와 똑같이 조건문을 추가하여 컴포넌트를 생성해준다.

바뀌는 컴포넌트를 생성해주는 부분을 잘라 함수로 만들어, 밖으로 빼준다.
getContent()안에 내용들을 render밖으로 빼내, return _article을 해준다.
컴포넌트가 들어가는 부분이었던
{_article}을 {this.getContent()}로 바꾸어 준다.

이 update부분은 read와 똑같이 내용을 읽어오는 과정을 거쳐야한다.
읽어오는 부분은 read와 똑같이 구현하기 때문에, content를 읽어오는 부분을 빼내어 함수로 만들어준다.

위와 같이 return은 data로, ReadContent의 props는 위처럼 리팩토링 해준다.

Update컴포넌트를 만드는 부분도 다음처럼 바꾸어준다.

2. update 구현 : form

위에 보이는 것처럼 데이터를 그대로 읽어 value에 넣어버리면 read-only라고 뜬다.
props는 직접 바꿀 수 없기 때문이다. 그렇기에 이 데이터를 state로 바꾸어야 한다.

코드는 위와 같이 바꾸었다.
title이라는 state를 추가해주었고, props에서 값을 받아온다.
아래의 input에서는 value를 state.title의 값으로 받아오고, 바뀌는 값을 실시간으로 state화 해주기 위해 onChange라는 함수를 추가한다. 작업자 도구를 확인하면 실시간으로 state가 바뀌는 것을 확인할 수 있다.

desc부분도 위와 같이 바꾸어준다.

하나하나 onChange를 적어주면 중복되는 코드가 너무 많아지기에, 함수를 하나 만들어준다.

리액트의 새로운 기술인 '[]'를 이용하여 타겟의 이름을 받아와 title이든, desc이든 상관없이
유동적으로 이름을 받아올 수 있게 한다.

위 처럼 bind를 해주어 간편하게 만들어 줄 수도 있다.

 

3. update 구현 : state 변경

update를 하려면 어디를 update를 할 지, 식별자가 필요하다.
즉 id를 필요로 한다.
그러므로 submit을 할 때에 id를 같이 던져주면 편하다.

위 처럼 state에 id를 추가해주고, 이를 이용해 onSubmit을 실행할 때, id도 같이 던져준다.

기존의 state를 복사해주어 새로운 contents배열을 만들고 이를 다시 setState를 통해 넣어준다.
받아온 id와 배열의 id를 비교하여 바꾸면 새로운 내용으로 update해주고, break해준다.

배열을 복사할 때는 Array.from을 사용하여 복사해준다.
concat과 같은 원리이다.

여기서 버튼을 눌렀을 때, read 모드로 변환하고 싶다면,
(create에서 submit, update에서 submit)

setState에서 mode만 추가해주면 된다.
둘 다 mode를 'read'로 바꾸어주면 된다.
create에서는 selected_content_id부분도 현재 받아온 max_content_id로 바꾸어준다.

4. delete 구현

만약 mode가 delete라면 저번처럼 배열을 복사해와서
선택된 id와 탐색한 id가 같다면 splice를 통해 원소를 삭제해준다.
splice의 첫번째 인자는 '인덱스'를 의미하고, 두번째 인자는 '인덱스부터 삭제할 개수'를 의미한다.
바꾼 후에는 변경된 _contents를 state의 contents에 적용하고,
mode도 'welcome'으로 바꾸어 준다.

 

악 대박 다 들었다.
와 대박 대박이다.
대박이다. 와 대박이다.
와 장하다 나

이제 React 잘 한다고 말할 수 있다.

[Reference]
생활코딩 React