todolist3 KDT 5th 웹개발자 입문 수업 43일차 - 1 Todo List 마저 구현하기 리듀서의 DONE 동작 구현 list 이외의 초기 state 값은 그대로 전달 되어야 하므로 전개 연산자를 꼭 사용해줘야 한다. 컴포넌트에서 전달 받은 id 값과 동일한 객체를 찾은 다음, 해당 객체의 done 항목을 true 로 변경해준다. 배열의 map() 메서드는 배열의 모든 값을 순회하면서 배열의 값을 return 된 값으로 변경해주기에 해당 메서드를 사용해준다. //reducer export default function todo(state = initState, action) { switch (action.type) { case CREATE: return { ...state, todoList: [ ...state.todoList, { id: action.payl.. 2023. 4. 5. KDT 5th 웹개발자 입문 수업 42일차 Redux 상태 관리 라이브러리 - 상태 관리가 필요한 다른 프레임워크에서도 사용 가능(jQuery, Vue.js, Angular.js ...) Redux의 개념을 각각의 프레임워크에 맞춘 라이브러리 사용 -> React-Redux 컴포넌트의 상태를 하나하나의 props 로 전달하면 힘들기에 이를 해결하기 위해 나온 라이브러리 즉, 컴포넌트의 상태를 각각 컴포넌트별 state 에 따라 관리하는 것이 아닌 하나의 store 라는 곳에서 관리한다. ✨ 상태 변화 값을 중첩된 컴포넌트 수 만큼 Props 로 전달하는 방식이 아니라 Store 에서 한번에 꺼내서 사용하는 편리함을 제공한다. Redux 의 기본 개념 Single source of truth 동일한 데이터는 항상 같은 곳에서 가지고 온다 (스토어라.. 2023. 4. 4. 지금까지 배운 것을 바탕으로 To do List 구현 지금까진 강사님이 주신 레퍼런스를 바탕으로 JS 기능을 구현했었는데, 이번 기회에 시간을 내서 HTML과 CSS, JS까지 모두 혼자 구현해보기로 하였다. 부트스트랩을 쓰는게 훨씬 예쁘기는 하겠다만 ... 디자인을 최대한 노력해보며(?) 사실 색 지정이 제일 어려웠다. 이렇게 무식하게 하다보면 언젠가 실력이 늘겠지! 1. HTML To Do List 추가 header를 굳이 나눌 필요는 없어보여서 한 section으로 만들고자 했다. 간단하게 제목 부분 입력 받는 부분 리스트가 추가되는 부분 이렇게 3부분으로 나눠줬다. 여기에 CSS를 입혀준다. 2. CSS section { width: 100vw; } section .inner { box-sizing: border-box; margin: auto; p.. 2023. 2. 16. 이전 1 다음
