[React] state값 수정, 저장하고 읽기

서론

저번 글은 적게 공부하기도 했고 폰으로 적어서 매우 정리가 안 됐을 것 같다.

그래서 복습하는 겸 되짚어보면서 이번 글을 적어볼 예정이다.

 

state를 form 태그로 수정하려면?

App.js

먼저 이해를 위해 간단히 read의 순서를 요약해보겠다. 이 모든 과정은 getContent 함수 안이라는 걸 유의하자.

1. content 중 하나를 클릭하면 mode가 'read'로 바뀌고, selected_content_id가 클릭된 content의 id로 바뀐다.
2. mode가 read일 때(if문) _content 변수에 getReadContent함수의 반환값을 할당한다. -> getReadContent 함수 : while문으로 data 변수에 contents[i]를 할당하고 data의 id가 선택된 id와 같으면 data의 내용(id, title, desc)를 반환한다.
3. _article 변수에 선택된 content의 내용(id, title, desc)을 포함한 ReadContent 컴포넌트를 할당한 후 _article을 반환한다.

 

그래서 Update는 어케 하는 거죵? 

App.js

이 역시 그냥 말로 설명하면 루즈해지고, 이해가 잘 안되니 두괄식으로 설명하겠다.

1. update를 누르면 mode가 update로 바뀐다.

2. mode가 update일 때 _content에 선택된 content의 내용을 할당한다.

3. UpdataContent 컴포넌트에 data(props)로 _content 내용을 보내고 onSubmit(props)로 function을 실행한다.

UpdateContent.js

4. UpdataContent의 state인 id, title, desc props 각각에 data의 id, title, desc값을 할당한다.

5. form submit이 된다면(onSubmit은 html 문법임을 기억하자.) App 컴포넌트의 onSubmit(props) 내의 함수의 인자로 수정된 content의 id, title, desc값을 보내고 alert("Submit!!")을 실행한다.

App.js

6. 함수로 수정된 content의 id, title, desc를 각각 _id, _title, _desc 인자로 전달받는다.

7. _contents에 원래 배열을 복제한다. (Array.from 사용)

8. while문을 통해 _contents[i]가 수정된 content의 id(_id)와 같다면 _contents[i]의 값을 수정된 content값으로 저장한다. (_contents는 state에 있는 게 아니라 state에 있었던 배열을 복제한 새로운 배열일 뿐임)

9. setState 함수로 state의 contents를 _contents로 바꾼다.

10. 이 모든 과정은 _article 변수에 UpdateContent 컴포넌트로 할당하고 반환한다.

 

이제 create, update, read 기능은 할 수 있게 되었다!!

헷갈리는 부분도 되게 많았는데, 이렇게 정리하면서 설명하니 이해가 잘 됐던 것 같다.

다음 글은 delete 기능을 구현하는 것으로 CRUD의 끝맺음을 지을 것 같다.

 

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