Dnote 4 - 3. React - 입력 폼 만들고 상태 관리.

killi8n·2018년 9월 21일
1

Dnote

목록 보기
8/15
post-thumbnail

components/notes/InsertForm/InsertForm.js

components/notes/InsertForm/InsertForm.scss

components/notes/InsertForm/InsertForm.js

이 InsertForm을 Main 페이지에 반영해보겠습니다.

pages/Main.js

이렇게 되면 너무 넓이가 넓어지므로, wrapper컴포넌트를 하나 만들어야합니다.

components/notes/NoteWrapper/NoteWrapper.js

components/notes/NoteWrapper/NoteWrapper.scss

components/notes/NoteWrapper/index.js

이제 이 wrapper로 InsertForm을 감싸줍니다.

pages/Main.js

위치가 나름 잡아졌죠?

그렇다면 이제 이 입력폼을 가지고 실제로 redux를 사용하여 django와 통신하여 새 노트를 한번 만들어보겠습니다.

일단 노트 input의 value 상태를 반영할 action과 리듀서를 생성해보겠습니다.

store/modules/notes.js

이제 이 모듈을 index에서 반영해줍니다.

store/modules/index.js

그럼 이제 이 모듈을 사용해서 input값을 관리해볼까요?

일단 그러기 위해서 container를 하나 생성해주어야합니다.

containers/NoteContainer.js

그런 뒤에 pages에서 이 컨테이너만 렌더해줍니다.

pages/Main.js

이제 InsertForm 컴포넌트에서 마무리 작업을 해줍니다.

components/notes/InsertForm/InsertForm.js

이제 리덕스 데브툴스로 보면 입력을 할때마다 값이 바뀌는것을 알수 있습니다.

다음에는 이 값을 가지고 실제 노트를 하나 생성해보겠습니다.

profile
killi8n

1개의 댓글

comment-user-thumbnail
2019년 7월 27일

혹시 이글 전체 소스가 있는 곳이 있으면 링크 부탁드립니다 .ㅠㅠㅠ

답글 달기