Dnote 4 - 6. React - 노트 리스트 구현 및 수정 / 삭제 기능 구현.

killi8n·2018년 9월 23일
0
post-thumbnail

이제 할것은 노트 리스트 보여주기인데, Django API의 notes 앱의 url 중

을 참조하여 가져올것이다.

일단 우리는 권한 설정을 하지 않았으므로, 모든 노트들을 가져올수 있다.

postman으로 위 url에 접근해보자.

입력된 리스트들을 받아올수 있다.

이것을 우리는 React에서 보여줄것이다.

일단 redux 처리부터 해보자.

store/modules/notes.js

modules/index.js

이렇게 되면 리덕스 작업은 끝이났고, 이제 UI에서 렌더링해줄 작업이 남아있다.

containers/NoteContainer.js

이렇게 componentDidMount에서 노트를 불러오면 redux 상태가 다음과 같아진다!

Imgur

이제 통신은 완료 되었고, UI를 생성해보자.

components에 NoteList와 NoteItem을 추가해준다.

components/notes/NoteItem/NoteItem.js

components/notes/NoteItem/NoteItem.scss

components/notes/NoteList/NoteList.js

components/notes/NoteList/NoteList.scss

마지막으로 NoteContainer에서 NoteList를 불러오고, notes를 props로 전달해준다.

containers/NoteContainer.js

이렇게 되면 작성된 노트의 리스트를 모두 보여줬다.

리스트를 모두 보여줬으니, 그에 따른 기능들을 구현해볼까??

일단 수정하는 기능을 추가해보자. 수정은 노트아이템을 클릭하면 수정할수 있게 만들것이고, 되돌아 가려면 다시한번 토글하면 되는 식이다.

redux로 돌아가서 수정 기능을 추가해보자.

modules/notes.js

이렇게 되면 토글시, editing 에 토글된 노트의 id와 text값이 저장된다.

containers/NoteContainer.js

components/notes/NoteList/NoteList.js

components/notes/NoteItem/NoteItem.js

여기까지하면 토글시 다음과 같이 나타날 것이다.

Imgur

단, 여기서 input에서는 value값만 주고 onChange함수를 작성하지 않아서 오류가 뜰텐데, 이것을 고쳐보자.

일단 다시 redux로 돌아가서 changeNoteInput부분을 바꾸어 주어야 한다.

modules/notes.js

containers/NoteContainer.js

components/notes/NoteList.js

components/notes/NoteItem.js

이렇게 되면 토글을 할때에도, 전혀 문제가 되지 않고 수정시에도 수정한 글자들이 모두 상태에 반영됩니다.

그럼 이제, 실제로 수정 기능을 구현해볼까요?

modules/notes.js

modules/index.js

containers/NoteContainer.js

components/notes/NoteList/NoteList.js

components/notes/NoteItem/NoteItem.js

자 이렇게 되면 노트 수정까지 완료되었습니다.

이제 삭제를 해볼까요?

modules/notes.js

modules/index.js

containers/NoteContainer.js

NoteList.js

NoteItem.js

이렇게 되면 삭제도 가능해집니다!

다음에는 권한설정 및 무한 스크롤링 기능을 구현해보겠습니다.

profile
killi8n

5개의 댓글

comment-user-thumbnail
2018년 10월 26일

notes.js 내 deleteNoteEpic 구현이 되어 있지 않네요 ㅠㅠ

1개의 답글
comment-user-thumbnail
2019년 1월 10일

TypeError: Cannot read property 'map' of undefined
NoteList
components/notes/NoteList/NoteList.js:9
6 | const cx = classNames.bind(styles);
7 |
8 | const NoteList = ({ notes }) => {

9 | const noteList = notes.map((note, i) => {
10 | return ;
11 | });
12 |
View compiled
왜 이러는걸까요..

2개의 답글