🛠 업데이트 진행중 (~ 221213)
ToDoList에서 해야하는 일 🔥
1.Input에 들어온 값 저장하기 / button 클릭으로 Submit
2.Submit 된 값들 받아와서 todoboard에 렌더링하기
3.TodoBoard에 들어온 값을 삭제하기 / 완료<>취소 스위치해주기
(1) Input에 들어온 값 저장하기 / button 클릭으로 서브밋
- AddInput컴퍼넌트에서 title과text값이 저장되고 변경될 set값과 useState만들어줌
const [Title, setTitle] = useState("");
const [text, setText] = useState("");
//그리고 Input에서 onChange이벤트를 이용하자(각각)
//onChange : 안이 바뀔떄마다 동작하는 것
//Input에 입력하면 onChange에 의해서 셋값으로 들어간다.
const clickModetitle = (event) => {
setTitle(event.target.value);
};
const clickModetext = (event) => {
setText(event.target.value);
};
//잊지말고 value값과 onChange={각 함수의 이름}넣어줌
//여기서 value값은 Input에 입력되는 값이다.
//console.log 또는 alert로 확인을 하면 글이 쓰여질때 잘 작동하는걸 볼수있음
- form에 onSubmit이벤트를 넣어줘서 호출되게 만들어준다
✨form안의button이 클릭되면onSubmit이 호출된다. 이건 외워야함!!!!
const handleSubmit = (event) => {
//Submit은 자동새로고침되므로 그 부분을 막아준다.
event.preventDefault();
const newTodos = {
// title옆에는 위에 setTitle으로 설정한 title값이 들어가는데
//const [hello, setHello] = useState("") ,input의 value={hello}라는 값이 설정되어있다면
//타이틀 옆에는 title:hello가 들어간다.
title: title,
text: text,
isDone: false,
id: uuidv4(),
//App에서 초기 배열 값으로 지정해줬던 배열을 가져와 새로운 값을 선언함.
};
// 부모컴퍼넌트(App)에서 {setTodos}프롭값받아오는거 잊지말기!! 제발!!
setTodos((prev) => {
return [...prev, newTodos];
});
};(2) Submit 된 값들 받아와서 TodoBoard에 렌더링하기
1번 과정이 끝나면 Input에 들어온 새로운 값까지 저장이 된 상태이다.
이제 그 값을 화면에 렌더링해주면 됨!
App.jsx의TodoBoard에 props 내려주는거 확인 꼭! 하기
props로 내려주는 값은 {setTodos,todos,Working}
(Working은 아래 삼항연산자에서 설명함^^:)
TodoBoard.jsx
{/* 각 보드안에 들어가서 렌더링될 값을 보여줌 */}
{todos
.filter((item) => item.isDone == !work)
//필터로 isDone과 work가 같은 값을 반환함
//(이 작업에서는 isDone기본값은 false이고,
//work 기본값은 true로 설정해둠,!work를 쓰는 이유..)
.map((item) => {
return <Todo item={item} work={work} setTodos={setTodos} />;
})}
//filter()는 조건을 통해 값을 걸러서 골라낸 값만을 반환하고,
//map()은 무조건 결과를 반환함 (골라내도 빈 부분은 undefined로 반환됨)
//위 문법들을 이용해서 렌더링되는 화면을 분류해서 보여준다
Todo.jsx
{item,work,setTodos}를 props로 받아오는게 우선!
그 후, 화면에 나타낼 값들을 중괄호를 써서 나타내준다.
<h2>{item.title}</h2>
<p>{item.text}</p>
<button>완료</button>
<button>삭제</button>(3) Button 삭제 / 완료<>취소 스위치해주기
삭제버튼 (필터 사용->반환해주는 값을 걸러줘야함)
const DeleteButton = ()=>{
//기본적으로 event값을 가지지만 이 함수내에서는 쓰이지않으므로 사용안함
sesTodos((prev)=>prev.filter((t)=>t.id !== item.id))
}
<button onClick={DeleteButton}
// 여기서 prev는 현재상태의 셋투두값을 뜻함
// 예를들어 현재 투두의 배열안에 3개의 투두값이 있다.
//그 값(t.id)을 순서대로 가져와서 돌려주고있다.
//그러다가 내가 삭제를 누른 투두값(item.id)와 만나면 그 값이 아닌 값들만 리턴되게 해준 것.
완료<->취소 스위치버튼 (맵 사용->반환되는 값은 유지됨)
const switchButton = () => {
setTodos((prev) =>
prev.map((t) => {
if (t.id === item.id) {
return { ...t, isDone: !t.isDone };
} else {
return t;
}
})
);
};
<button onClick={SwitchButton}
//배열을 돌리며 나온 값과(t.id) 내가 클릭한 값(item.id)이 같다면,
//isDone을 바꿔서 리턴해준다! 그렇지않은 값들(내가 클릭하지않은값들)은 그대로 리턴하면된다.
중요 POINT 정리하기
🍯tip
- 한 개의 컴퍼넌트만 return에 들어가는데
빈 태그 : <></>를 써도 된 다.
import React from 'react'
const Test = () => {
return (
<>
</>
)
}
export default Test-
React는 jsx코드를 렌더링하는데state와 props의 변화에 따라 동적으로 렌더링한다. 어디서?return부분에서! -
구조 분해 할당 (De +Struct+~ing = Destructuring )
- 객체와 배열에서 다 사용가능하다.
- 🔥
setState는 항상이전값(prev)을 인자로 가진다.
//배열을 변경하는 경우
setTodos((prev)=>{
return[...prev,newTodos]
})
//추가를 하려면 배열을 열고 넣으려는 새로운 값(newTodos)을 넣어줌- 삼항연산자
{isWork? 진행중 : 완료함} //TodoBoard 에서 참,거짓
//App에서 TodoBoard컴퍼넌트에 isWork로 props를 내려준것.
//<TodoBoard work={true} /> true,false로 참 거짓 나눠준다.
- export default Test; 의미는 Test가 대표 컴퍼넌트라는 뜻이다(그jsx파일에서 대표)
질문들 해결하기 🧐
🌱