과제를 이어서 해보자.
- 로드맵과 필수 및 선택 구현사항을 진행해보자.
1. 추가 및 렌더링
1-1. 렌더링
사실 어제는 여기서부터 어려웠다.
state와 props를 사용해야하는것은 알겠는데...
어떻게 해야하지? 막막했다.
머릿속에만 있는 지식이 출력이 안되는것이었다.
매우 당황했다.
그렇지만 차근차근 해보기로 했다.
//App.jsx const mokData = [ { country: "대한민국", gold: 10, silver: 2, bronze: 1 }, { country: "미국", gold: 7, silver: 3, bronze: 2 }, ];
- 우선 임시데이터를 만들어주고,
//App.jsx function App() { const [medalData, setMedalData] = useState(mokData); return ( <div className="App"> <Header /> <Editor /> <MedalList medalData={medalData}/> </div> ); } export default App;
state를 생성한 뒤,MedalList에props로 전달해줬다.
//MedalList.jsx import "./MedalList.css"; const MedalList = ({ medalData }) => { return ( <div className="MedalList"> <div className="medal-title"> <span>국가명</span> <span>금메달</span> <span>은메달</span> <span>동메달</span> <span>액션</span> </div> {medalData.map((data, index) => ( <div className={`medal-info ${index % 2 === 0 ? "even" : "odd"}`} key={data.id}> <span>{data.country}</span> <span>{data.gold}</span> <span>{data.silver}</span> <span>{data.bronze}</span> <button>삭제</button> </div> ))} </div> ); }; export default MedalList;
props로 전달받은medalData를map을 이용하여 뿌려준다.
- 잘 나온다.
1-2. 데이터 추가
이제 임시데이터는 지우고, 새 데이터를 추가해보자.
//App.jsx import { useState } from "react"; import "./App.css"; import Editor from "./components/Editor"; import Header from "./components/Header"; import MedalList from "./components/MedalList"; function App() { const [medalData, setMedalData] = useState([]); const addMedalData = (newData) => { setMedalData([...medalData, newData]); }; return ( <div className="App"> <Header /> <Editor addMedalData={addMedalData}/> <MedalList medalData={medalData}/> </div> ); } export default App;
addMedalData함수를 만든 뒤,Editor컴포넌트에 전달한다.
//Editor.jsx import { useState } from "react"; import "./Editor.css"; import EditorItem from "./EditorItem"; const Editor = ({ addMedalData }) => { const [formData, setFormData] = useState({ country: "", gold: 0, silver: 0, bronze: 0, }); const handleOnChange = (e) => { const { name, value } = e.target; setFormData({ ...formData, id: new Date().getTime(), [name]: value, }); }; const handleOnSubmit = (e) => { e.preventDefault(); addMedalData(formData); setFormData({ country: "", gold: 0, silver: 0, bronze: 0 }); }; return ( <div className="Editor"> <form className="input-form" onSubmit={handleOnSubmit}> <div className="input-group"> <EditorItem title="국가명" type="text" placeholder="국가 입력" name="country" value={formData.country} onChange={handleOnChange} /> <EditorItem title="금메달" type="number" placeholder="0" name="gold" value={formData.gold} onChange={handleOnChange} /> <EditorItem title="은메달" type="number" placeholder="0" name="silver" value={formData.silver} onChange={handleOnChange} /> <EditorItem title="동메달" type="number" placeholder="0" name="bronze" value={formData.bronze} onChange={handleOnChange} /> </div> <div className="button-group"> <button className="add-button" type="submit"> 국가 추가 </button> <button className="update-button" type="button"> 업데이트 </button> </div> </form> </div> ); }; export default Editor;
-
input값을 저장할state를 만들어주고,
handleOnChange가 감지될때, 모든input태그의 값들을formData에 저장한다. -
form태그에onSubmit={handleOnSubmit}를 입혀주고,
handleOnSubmit함수가 실행될때,addMedalData함수에 모든state가 저장된formData를 전달한다.
이제 데이터를 추가해보자.
- 작동이 잘 된다.
2. 삭제
- 삭제기능은 어렵지 않았다.
//App.jsx import { useState } from "react"; import "./App.css"; import Editor from "./components/Editor"; import Header from "./components/Header"; import MedalList from "./components/MedalList"; function App() { const [medalData, setMedalData] = useState([]); const deleteMedalData = (id) => { const deletedData = medalData.filter((item) => item.id !== id); setMedalData(deletedData); }; return ( <div className="App"> <Header /> <Editor /> <MedalList medalData={medalData} deleteMedalData={deleteMedalData} /> </div> ); }
App컴포넌트에서deleteMedalData함수를 만들어주고,
MedalList에props로 전달한다.
//MedalList.jsx import "./MedalList.css"; const MedalList = ({ medalData, deleteMedalData }) => { return ( <div className="MedalList"> <div className="medal-title"> <span>국가명</span> <span>금메달</span> <span>은메달</span> <span>동메달</span> <span>액션</span> </div> {medalData.map((data, index) => ( <div className={`medal-info ${index % 2 === 0 ? "even" : "odd"}`} key={data.id}> <span>{data.country}</span> <span>{data.gold}</span> <span>{data.silver}</span> <span>{data.bronze}</span> <button onClick={() => deleteMedalData(data.id)}>삭제</button> </div> ))} </div> ); }; export default MedalList;
button태그에onClick={() => deleteMedalData(data.id)}을 입혀주면 끝!
3. 업데이트
CRUD의 기능중에 가장 애먹었던부분이다.
초기로직은 다음과 같다.
//App.jsx const updateMedalData = (updatedData) => { setMedalData([updatedMedalData, ...medalData]); }; return ( <div className="App"> <Editor updateMedalData={updateMedalData} /> </div> );
- 업데이트가 아니라 추가가 된다.
지금보면 너무 당연하다고 생각한다.
addMedalData함수와 이름만 다르지 똑같으니까..
그래서 다음과 같이 수정했다.
//App.jsx const updateMedalData = (updatedData) => { const updatedMedalData = medalData.map((item) => item.country === updatedData.country ? updatedData : item ); setMedalData(updatedMedalData); }; //Editor.jsx const handleUpdate = () => { updateMedalData(formData); setFormData({ country: "", gold: 0, silver: 0, bronze: 0 }); };
- 이제 결과를 확인해보자.
- 아주 잘된다.
4. 앞으로 구현해야할 기능
추가 및 수정해야할 기능들은 다음과 같다.
- 국가추가시 국가명이 없을때는 추가되지 않게한다.
- 국가추가시 국가명이 숫자를 포함할때도 추가되지 않게한다.
- 국가추가시 국가명이 존재할때는 새로 추가하지않는다.
- 업데이트시 존재하지 않는 국가는 알려준다.
- 업데이트시 해당 국가만 업데이트가 되게 한다.
- 국가 추가 및 업데이트시 금메달 순으로 정렬한다.
- 메달입력시 양수만 가능하게 한다.
- 메달수는 최대 2자릿수까지만 되게한다.
- 메달입력시 "02"로 입력되어도 "2"로 입력되게 한다.
차례대로 해보자.
회고
-
정말 힘든순간이었다.
분명 공부를 했는데도 불구하고 왜 안되는거야?
개념도 알고 사용법도 아는데 대체 왜 로직을 작성하지 못하는거야? -
지금에서야 조금 괜찮아졌지만
다시 한 번 실습에 대한 중요성을 느꼈고,
직접 로직을 작성해보는것이 얼마나 중요한지 다시 한 번 깨닫는 순간이었다.
이해로 끝나는게 아니라 직접 작성하며 구현까지 해보아야 한다! -
그리고 가장 중요한것을 한 가지 깨닫게됐다.
바로 천천히 차분히 생각하는 방법
이것이 내게는 가장 중요한것 같다. -
이제 자잘한것들을 추가 및 수정하며 프로젝트를 완성시켜보자!
