«   2022/10   »
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          
Archives
Today
0
Total
96,326
관리 메뉴

차근차근

[Redux] Redux를 이용한 CRUD 본문

대학교/FE

[Redux] Redux를 이용한 CRUD

SWKo 2020. 3. 8. 17:23

0. 정적인 웹페이지 만들기

  • Redux를 도입하기전 간단한 웹페이지를 만든다.


1. 부품화

  • 각각의 기능에 대해 모듈화를 시킨다.


2. store 생성과 state 사용하기

  • store를 생성하고 state를 사용한 코드이다.
  • 결과는 처음과 같지만 reducer내부에 있는 contents의 내용을 바꾸면 그에 해당하는 코드들이 전부 바뀐다는 점이 다르다.


3. action을 dispatch를 통해서 전달하기

  • store의 state값을 변경하기 위해서 action을 발생시키고 action이 dispatch를 통해서 reducer를 실행시키면 state의 새로운 값을 return 한다. state값이 바뀌면 subscribe하고 있는 함수들을 호출해줌을 통해서 ui가 업데이트된다.
  • event.preventDefault() -> event가 발생했을 때 event를 발생시킨 그 태그의 기본적인 동작을 못하게 방지하는 코드이다.
  • action에서 필수적인 property는 type이다.


4. subscribe를 통해서 자동 갱신 되도록 처리

  • action을 dispatch를 통해 전달하면 reducer가 state값을 갱신하고 dispatch가 subscribe하고 있는 함수들을 호출해주기 때문에 그에 따라서 render가 동작해서 state값을 참조한 후 ui를 새로 그리기 때문에 클릭할때마다 자동갱신이 된다.

  • HTML, CSS를 클릭할때마다 본문이 자동갱신 된다.


5. 글생성 기능 구현

  • 글생성 기능을 구현한 코드이다.


6. 글삭제 기능 구현

  • 글삭제 기능 후 최종화면은 다음과 같다.

  • 최종 코드는 아래 깃허브에서 확인할 수 있다.

https://github.com/KoSangWon/redux-tutorial

 

KoSangWon/redux-tutorial

Contribute to KoSangWon/redux-tutorial development by creating an account on GitHub.

github.com

 

'대학교 > FE' 카테고리의 다른 글

[React-Native] (4) 모바일 컴포넌트  (0) 2020.03.11
[React-Native] (3) 애플리케이션 만들기  (0) 2020.03.10
[Redux] 시간여행과 로깅  (0) 2020.03.08
[Redux] Redux 적용  (0) 2020.03.08
[React & Redux] React & Redux  (0) 2020.03.05
0 Comments
댓글쓰기 폼