좀더 쉽게 그리고 코드를 최소로 쓰려고 노력했다
그리고 엄청 쉬운해결법을 두고 3일동안이나 못찾아서 스트레를 받았었지만 풀고나서 속시원한 작업이었다.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {Provider} from 'react-redux';
import store from './store';
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
app.js
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Detail from './routes/Detail';
import Home from './routes/Home';
const App = () => {
return (
<Router>
<Routes>
<Route path="/" element={<Home/>}/>
<Route path="/:id" element={<Detail/>}/>
</Routes>
</Router>
);
};
export default App;
store.js
import {createStore, combineReducers} from 'redux';
const ADD = "ADD"
export const DELETE = "DELETE"
export const addToDo = (text) =>{
return{
type : ADD,
text
}
}
export const deleteToDo = (만세)=>{
return{
type:DELETE,
id: 만세
}
}
const reducer = (state =[] , action ) =>{
switch(action.type){
case ADD: const id = Date.now()
return [{text:action.text, id:id}, ...state]
case DELETE:
return (state.filter((toDo) => toDo.id !== action.id))
default:
return state
}
}
const store = createStore(reducer)
export default (store);
Home.js
import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addToDo, deleteToDo } from '../store';
import ToDo from './ToDo';
const Home = () => {
const toDos = useSelector((state)=>state);
const dispatch = useDispatch()
const [text,setText] = useState("")
const onChange =(e) =>{
setText(e.target.value)
}
const onSubmit = (e) =>{
e.preventDefault();
dispatch(addToDo(text))
setText("")
}
return (
<>
<h1>To Do</h1>
<form onSubmit={onSubmit}>
<input type="text" value={text} onChange={onChange}/>
<button>Add</button>
</form>
<ul>
{toDos.map(toDo=>(<ToDo {...toDo} key={toDo.id} id={toDo.id} deleteToDo={deleteToDo}/>) )}
</ul>
</>
);
};
export default Home;
ToDo.js
import React from 'react';
import { useDispatch } from 'react-redux';
const ToDo = ({text, id,deleteToDo}) => {
const dispatch = useDispatch()
const onClick = () =>{
dispatch(deleteToDo(id))
}
return (
<li>
{text}
<button onClick={onClick} >DEL</button>
</li>
);
};
export default ToDo;
Detail.js
import React from 'react';
const Detail = () => {
return (
<div>
<h1>디테일 페이지</h1>
</div>
);
};
export default Detail;
store 의
딜리트 기능의 action.id 를 읽어오질 못해서 큰일이었다. id값을 못구해오던것이다.
이게 사실 엄청 쉬운 방법이있었다 내가 못해서 못찾은 이유도 컸다
Home.js 에서
<ul>
{toDos.map(toDo=>(<ToDo {...toDo} key={toDo.id} id={toDo.id} deleteToDo={deleteToDo}/>) )}
</ul>
이부분에서 id={toDo.id} 과 deleteToDo={deleteToDo}를 프롭스로 넘겨서
프롭스 파일의 거리가 멀다면 그파일에서
mport { useSelector, useDispatch } from 'react-redux';
사용하면된다.
toDo.js
import React from 'react';
import { useDispatch } from 'react-redux';
// id 는 toDo.id 값이다.
const ToDo = ({text, id, deleteToDo}) => {
const dispatch = useDispatch()
const onClick = () =>{
dispatch(deleteToDo(id))
//이쪽으로 넘겨주면 엄청 쉬운방법이었다.
}
return (
<li>
{text}
<button onClick={onClick} >DEL</button>
</li>
);
};
export default ToDo;
받아주고
store.js
export const deleteToDo = (만세)=>{
return{
type:DELETE,
id: 만세
}
여기서 받아서 필터로 보내면 되는것이었다 ㅠㅠ.
파일 흐름
store.js = 액션 기능과 액을 부르는 함수
app.js = 라우터 적용
index.js = 스토어 연결. (리덕스)
Home.js = useSelector / useDispatch 와 스토어의 함수를 불러오기.
ToDo.js = 리스트 생성 작업 (액션실행함수와 id 값을 Home.js 에서 받아와야합니다.)
ToDo.js. = onClick 에 적용.