Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
일 월 화 수 목 금 토
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
Tags
more
Archives
Today
Total
관리 메뉴

리액트 정리

[TodoList] Context API + useReducer로 상태관리하기. 본문

카테고리 없음

[TodoList] Context API + useReducer로 상태관리하기.

버그킴 2020. 3. 2. 02:31

App에서 함수와 값들을 props로 내려준다면 ? 

App component에서 모든 상태를 지니고 있다. 여기서 함수도 만들어준다. 

- undoneTasks: 미완료 tasks. 

- todos: 현재 todo들  

- onRemove

- onToggle

- onCreate

 

TodoList는 onRemove와 onToggle을 직접적으로 사용하지 않음. TodoItem에서 필요해서 거쳐서 내려준 것. (비효율적)

 

 

 

 

Context API (+useReducer)를 사용한다면? 

Context를 만들어서

각 component에서 필요한 것들을 끌어서 쓸 수 있게 할 것이다.

 

따로 function을 만드는 것이 아니라,

state update에 필요한 action들을 만들고 dispatch만 넣어줄 것. 

 

  • TodoCreate, TodoItem:바로 action을 dispatch하는 작업을 해줄 것 ( 변화를 필요로 하기 때문에 )
  • TodoHead, TodoList: todos를 전달 해줄 것. ( 현재 todos에 어떤 데이터가 들어있는지 확인할 필요가 있으니까 )
  • TodoList를 렌더링 할 때: todos 배열을 .map 해서 각 todo 항목들을 TodoItem 컴포넌트로 바꿔서 렌더링 해줄 것이고용
  • onToggle, onRemove: 는 TodoList에서 자체적으로 구현할 것입니다. 

 

 

 

리듀서 만들기

 

 

 

 

 

 

 

 

 

https://react.vlpt.us/mashup-todolist/02-manage-state.html

 

2. Context API를 활용한 상태 관리 · GitBook

02. Context API 를 활용한 상태 관리 우리가 만든 투두 리스트 애플리케이션에서, 만약 상태 관리를 한다면 다음과 같은 구조로 구현 할 수 있습니다. App 에서 todos 상태와, onToggle, onRemove, onCreate 함수를 지니고 있게 하고, 해당 값들을 props 를 사용해서 자식 컴포넌트들에게 전달해주는 방식으로 구현 할 수 있죠. 이렇게 구현하는것도 큰 문제는 없습니다. 이 프로젝트는 정말 작고 단순하기 때문이죠. 하지만

react.vlpt.us