오늘 할 일

오전

후발대 마지막 영상 다시보기
혼자서 투두리스트 삭제+스위치 만들어보기

오후

코딩애플 2레벨 영상 보기
혼자서 투두리스트 삭제+스위치 만들어보기
30분 산책하고오기
내배캠 숙련강의 영상 복습

후발대 강의에서 배운 것

const handleDeleteButtonClick = () => {
  setTodos((prev) =>            // todos를 prev에 담음
    prev.filter((t) => {        // prev(배열)안에있는 요소 하나하나를 t에 담음 
        return t.id !== item.id;// t의 id와 item의 id가 같지 않은것들만 리턴해서 빈 배열에 담음     
			})
    );
  };

prev : 지금 현재 상태, 즉 todos 그 자체

t : todos 배열안에 있는 객체(요소) 하나하나

• filter, forEach, map, reduce는 요소의 처음부터 끝까지 전부 순회를 해야지 끝난다.
• filter : 빈 배열을 만들고 → 하나씩 return문에 있는 식을 검증하여 true인 애들만 빈 배열에 담는다.

const handleSwitchButtonClick = () => {
	  setTodos((prev) =>                        // todos를 prev에 담는다.                  
      prev.map((t) => {                       // prev에 length만큼 prev의 요소를 t에 하나씩 담는다.
        if (t.id === item.id) {               // t의 id와 item의 id와 같으면
          return { ...t, isDone: !t.isDone };
                              // t에 isDone을 반대로 바꾼다(true라면 false, false라면 true로 바꾼다)
      } else {                                // t의 id와 item의 id가 같지 않으면
          return t;                           // t 그대로 놔둔다.
        }
      })
    );
  };

return { ...t, isDone: !t.isDone };

이 코드는 t에 isDone이 있으면 !t.isDone(지금의 isDone과 반대로)으로 바꿔주는거고,

만약에 t에 isDone이 없으면, isDone: !t.isDone 을 추가해주는 것이다.

// input.jsx
setTodos((prev) => {
      return [...prev, newTodo] // 대괄호가 쓰이는 이유와 중괄호가 쓰이는 차이가 뭔지..?
    });
  }

… 스프레드 문법은, 괄호를 1개 제거해준다는 것이다.

위 코드를 해석해보자면, prev의 괄호를 제거하고 newTodo를 추가해준다는 것인데

추가해주고 마지막에 [] 대괄호를 입혀준다는 뜻이다.

저기서 prev는 todos 그 자체이기때문에 prev는 객체이다.

// TodoList.jsx
{todos
        .filter((item) => item.isDone === !isActive) //이거 뭔지 이해 안감
        .map((item) => {
          return <Todo item={item} isActive={isActive} setTodos={setTodos} key={item.id} />
        })}

만약 item.isDone의 값이 false라면, 해야할일 이다.

근데 해야할일의 isActive는 true로 고정이 되어있다.

filter의 값이 true여야 그다음 map으로 넘어가기 때문에,

true로 만들어주기 위해 item.isDone === !isActive 라는 연산자를 사용했는데,

item.isDone !== isActive 로 만들어줘도 된다.

export default App
export {InApp, InApp2}

export default 와 export 의 차이점

export default : 저 코드에서는 “App을 대표 컴퍼넌트로 내보낼게요” 라는 뜻, default값은 2개 이상이 될 수 없다.

export : 컴포넌트를 저렇게 중괄호에 묶어 여러개 내보낼 수 있음.

리덕스를 쓰는 이유

app.js에서 하위x3 컴퍼넌트에 props를 받아오려면 어떻게 해야 할까?

app → 1 → 2 → 3 순서대로 props 전달

즉, app이 1번에게 props 전달,

1번은 app에게 받은 props를 2번에게 전달,

2번은 1번에게 받은 props를 3번에게 전달.

이것을 props drilling(프롭스 드릴링) 이라 한다.

이렇게 전달해주면 코드가 아주아주 둬러워지는것을 볼 수 있다.

가독성도 좋지않고, 이게 뭐지..어디에 전달되는거지..분명히 헷갈릴 수 있다.

그래서 우리는 리덕스를 쓴다고 한다.

리덕스는 중앙관리소 라는 reduxStore를 만들어서, 그곳에 정보를 담고 그 정보를 뿌려주는 역할을 하기때문에

props와는 별개이긴 한데 props의 역할을 쉽게 할 수 있다.

props는 부모→자식 에게만 정보를 전달 할 수 있다고 한다.