전체 글64 WIL 7주차 Facts -리액트 -리덕스 -리액트,리덕스 Feelings - 리액트를 더 유용하게 사용할 수 있게 리덕스를 배우는데 아직 익숙하지 못해 더 불편하다 Finding -useDithpatch -useSelector -configStore -modules -reducer Future -Redux 숙련 강의 수강 -React 강의 수강 -Redux 사용하여 TodoList 2022. 12. 19. Redux Redux - 전역 글로벌하게 상태를 저장할 수 있는 곳을 만들고 어떤 컴포넌트든지 쉽게 접근 가능하게 해주면서 상태관리를 쉽게 해준다! 리액트만 사용했을때는 1,2,3,4 로 옮기기 위해서 prop를 통해서 부모컴포넌트에서 자식 컴포넌트로 값을 보내 주었다. 여러컴포넌트가 있을때는 propsDrilling을 이용하여 값을 보내주곤 했는데 컴포넌트가 만약 수백개라면 사용하는데 불편함이 있어서 리덕스를 사용한다고 한다! 리덕스는 전역에서 사용이 가능하여 원할때 값을 쉽게 빼올 수 있는 장점이 있다? 일단 리액트에서 리덕스를 사용하려면 두개의 패키지를 설치해야한다 yarn = yarn add redux react-redux npm = npm i redux react-redux 터미널에서 설치해주고 시작 리덕.. 2022. 12. 17. 완료,삭제 기능 구현 저번에 만들던 투두리스트에서 삭제기능과 완료기능 , 취소 기능을 구현해 보았다 export default function TodoList({ todos, isActive, setTodos }) { const todoBox = { border: "1px solid black", padding: "20px" }; return ( {isActive === true ? "해야 할 일" : "완료 한 일 "} {todos .filter((item) => item.isDone === !isActive) .map((item) => { return ; })} ); } 기존에 있는 투두리스트에서 투두로 컴포넌트로 나누었다. export default function Todo({ setTodos, isActive, ite.. 2022. 12. 16. TodoList 추가 기능 구현 export default function Input({ setTodos }) { const [title, setTitle] = useState(""); const [contents, setContents] = useState(""); const handleSubmitChange = (event) => { event.preventDefault(); const newTodo = { title: title, contents: contents, isDone: false, id: uuidv4(), }; setTodos((prev) => { return [...prev, newTodo]; }); }; const handleTitleChange = (event) => { setTitle(event.target.va.. 2022. 12. 14. 이전 1 2 3 4 5 6 7 ··· 16 다음
