[WIL] 내배캠4기 React 6주차

이번 주 한 것

• 투두리스트 복습
• 리액트 숙련 완강하기
• 후발대 강의 듣기(map,filter)
• 유데미 리액트 강의 시작

---

리액트 입문 강의 과제였던 투두리스트 만들기가 너무 어려웠다..
제대로 이해하고 있지 못해서 혼자서는 아무것도 칠 수 없었고, 후발대에 합류하기로 하였다🥹
늦게 시작하는 것 뿐이지 늦게 도착할거냐는 튜터님의 말씀에 용기를 얻었다. 화이팅🔥

투두리스트 파헤치기

form 태그 안에 있는 button이 눌리면 form태그의 onSubmit()이 호출된다.

• <form> : id, pw를 입력할 수 있는 폼을 만들 때 사용

예) setTodos('변경할 값') --> todos

• setState는 항상 이전 값을 인자로 가진다.
  • 배열을 변경하는 경우에 주로 사용

setTodos(콜백 함수)

setState 상태 변경

//prev: 이전 값 <- 현재 상태의 todos가 들어감
setTodos((prev) => {
//이전값에 뭔가를 추가하고 싶다.
	return [...prev, '추가하고자 하는 값']
})

예시)

//투두리스트 코드 발췌
setTodos((prev) => {
	return [...prev, {todo, isDone: false, id : uuid()}];
  //풀어서 쓰면 이렇다.
  //{todo: todo, 키와 밸류가 동일하면 생략해서 써도 된다!
//isDone: false,
// id: uuid()}
  

---

배열을 다루는 유용한 방법들

// 일반적인 for문을 이용해서
const testArr = [2, 10, 100, 7, 71, 50, 27, 1];

for (let i = 0; i < testArr.length; i++) {
  console.log(testArr[i]);
}
// for of문을 이용해서

for (item of testArr) {
  console.log(item);
}

//forEach for문과 같다
//forEach 쓰는 방법 중 하나 : 매개변수로 함수를 담은 변수 넣어줘도 된다.

testArr.forEach((elem) => {
  console.log(elem);
});

map ; 맵핑한다
map, forEach의 매개변수로 보통 익명함수를 넣는다
map함수는 return한 애들을 모아서 새로운 배열을 만든다는 특징!!
사용 이유: 하나하나씩 할당해준다는 특징으로 값의 수정이 가능하다

const mappedArr = testArr.map((elem) => {
  return elem * 10;
});
console.log(mappedArr);

//filter; 걸러내어진 값을 반환하기 때문에 조건이 들어가는게 맞다
const filteredArr = testArr.filter((elem) => {

  if (elem > 10) return elem;
  else return null;
// 삼항연산자에서 return은 앞에 와야되는군
  return elem > 10 ? elem : null;
// ?? 로 더 줄일 수 있다
  return elem > 10 ?? elem;
});

//reduce
//일단 모르면 콘솔로 찍어봐..
//두번째 매개변수에 초기값을 넣어준다
testArr.reduce((acc, cur, idx) => {
  console.log("acc", acc);
  console.log("cur", cur);
  console.log("idx", idx);
  console.log("");
  return (acc += cur);
}, 0);