우든이 블로그

2020/12/08 - [React] - [React] 14. 리덕스로 TodoList구현하기 01 리액트 리덕스를 적용한 투두 리스트 만들기02 지난 시간에 만든 스토어를 적용하여 아래와 같은 투두 리스트를 만들어보겠습니다! 컴포넌트 생성 저는 src/Components 아래에 다음과 같은 컴포넌트들을 생성하여 줄 거예요! ㅇTodoTemplate : TodoList의 큰 틀을 담당할 컴포넌트 ㅇTodoInput : 새로운 할 일(Todo)을 추가할 수 있는 컴포넌트 ㅇTodoItem : 체크박스, 투두 텍스트, 수정/삭제 버튼을 보여줄 컴포넌트 ㅇTodoList : 할 일들을 모아 리스트로 보여줄 컴포넌트 TodoTemplate 먼저, 투두 리스트의 전체적인 틀을 보여 줄 수 있는 TodoTempat..

2020/11/30 - [React] - [React] 12. 리덕스(Redux) 개념 정리하기 2020/12/04 - [React] - [React] 13. 리덕스(Redux) 사용해서 카운터 만들기 이번에는 앞에서 공부한 리덕스를 사용하여 투두 리스트를 만들어 볼 예정입니다. 리액트 리덕스를 적용한 투두 리스트 만들기 01 프로젝트 생성 및 라이브러리 설치 새로운 프로젝트를 먼저 생성하여 줍니다. npx create-react-app todolist-app 생성된 프로젝트에 사용할 라이브러리들(redux, styled-component, react-icons등)을 설치하여 줍니다. 저는 투두 리스트를 꾸며주기 위해 styled-component를 사용하였습니다. npm install redux npm..

2020/11/30 - [React] - [React] 12. 리덕스(Redux) 개념 정리하기 프로젝트 생성 먼저, 리덕스를 사용할 프로젝트를 만들어 줍니다. npx create-react-app redux_counter React 라이브러리 설치 만들어진 프로젝트에 redux와 react-redux 라이브러리를 설치하여 줍니다. -- save는 install 할 때, ./node_modules 안에 패키지를 설치하고 ./package.json 에 자동으로 업데이트를 해줍니다. react-redux 라이브러리에서 제공하는 useSelector와 useDispatch Hooks와 Provider 컴포넌트를 사용하기 위해 react-redux도 설치하여 줍니다. npm install redux --save..

리덕스란, 효율적으로 상태관리를 해줄 수 있는 라이브러리 리덕스는 리액트에만 종속되는 라이브러리가 아닙니다. 다른 UI 라이브러리나 프레임워크와도 함께 사용할 수 있습니다. 리덕스 개념 정리! 액션(Action) 상태의 변화가 필요할 때 발생하는 것을 액션(Action)이라고 합니다. 액션에는 type 속성을 필수로 가지고 있어야 하는데요! 이 외의 속성은 자유롭게 추가해줄 수 있습니다. 아래 코드에서는 todo라는 객체에 id와 text를 추가해주었어요! { type: "ADD_TODO", todo: { id: 0, text: "리덕스 공부 시작!" } } 액션 생성 함수(Action Creator) 액션 생성 함수는 액션(Action)을 생성해주는 함수로, 파라미터를 받아 액션 객체 형태로 만들어주는..