리액트13 리덕스 리덕스 리덕스 세팅 npm install redux react-redux redux 폴더 만들고 redux폴던안에 config폴더랑 modules 폴더 만들기 , 폴더를 만들었으면 config 안에 configStore.js 만들고 modules 안에 우리가 사용할 state 들을 작성한다 . configStore는 state들을 컴포넌트에 연결시켜주는 역할을 한다 . 3.configStore 초기세팅 -creatStore() 만들기 const store = createStore(rootReducer); -리듀서 만들기 const rootReducer = combineReducers({ //이곳은 state 들을 연결시켜주는 곳 입니다. // ex) counter , accout }); 만든 리듀서를 c.. 2022. 12. 20. Redux Redux - 전역 글로벌하게 상태를 저장할 수 있는 곳을 만들고 어떤 컴포넌트든지 쉽게 접근 가능하게 해주면서 상태관리를 쉽게 해준다! 리액트만 사용했을때는 1,2,3,4 로 옮기기 위해서 prop를 통해서 부모컴포넌트에서 자식 컴포넌트로 값을 보내 주었다. 여러컴포넌트가 있을때는 propsDrilling을 이용하여 값을 보내주곤 했는데 컴포넌트가 만약 수백개라면 사용하는데 불편함이 있어서 리덕스를 사용한다고 한다! 리덕스는 전역에서 사용이 가능하여 원할때 값을 쉽게 빼올 수 있는 장점이 있다? 일단 리액트에서 리덕스를 사용하려면 두개의 패키지를 설치해야한다 yarn = yarn add redux react-redux npm = npm i redux react-redux 터미널에서 설치해주고 시작 리덕.. 2022. 12. 17. 투두리스트 오늘 리액트 투두리스트 보충 수업을 들으면서 map과filter에 개념에 대해서 한번 더 복습하였다 . import React from "react"; import Todo from "./Todo"; 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 ; })} ); } 일단 map 과 filter의 .. 2022. 12. 14. TodoList 연습 투두리스트 연습 import React, { useState } from "react"; import "./App.css"; import TodoBoard from "./components/TodoBoard"; function App() { const [input, setInput] = useState(""); const [todoList, setTodoList] = useState([]); const addItem = () => { setTodoList([...todoList, input]); }; return ( { setInput(event.target.value); }} > 추가 ); } export default App; 필요한 컴포넌트를 임폴트 해온다. state를 이용하여 데이터를 저장한다 .. 2022. 12. 13. 이전 1 2 3 4 다음
