오늘 한 일

아침발제 (리액트 숙련주차)
스탠다드반 3차강의 (todolist 타임어택)
todolist 해설강의
리액트 숙련 강의

오늘 공부한 내용

✅ standard 리뷰

✔ button type은 명시적으로 써주기

form 안에 button은 기본적으로 submit으로 취급하지만
협업할 때 혼란을 막기 위해 type을 명시해주는 것이 좋음

<button type="submit"> </button>

✔ 중복되는 코드는 체이닝 적극 사용

todos.filter().map()

		{todos
          .filter((todo) => todo.isDone === isDoneState)
          .map((todo) => {
            return (
              <div key={todo.id}>
                <h3>{todo.title}</h3>
                <p>{todo.body}</p>
                <button onClick={() => handleDelete(todo.id)}>삭제</button>
                <button onClick={() => handleToggle(todo.id)}>
                  {isDoneState ? '취소' : '완료'}
                </button>
              </div>
            );
          })}

✔ 폴더로 컴포넌트를 나눌 때 폴더/index로 만들기

src/header/index.jsx 로 만들면 나중에 import 할 때
header 폴더까지만 가면 기본적으로 index로 인식하기 때문에 편함

✅ 여러 개의 input을 객체로 묶어서 관리하면 좋은 점

2개의 input을 하나로 묶어 inputs 로 useState 를 사용하는 방법과
각각의 input 마다 useState를 사용하는 방법이 있지만
둘 다 해본 결과 하나로 묶어서 관리하면
💡
1. onChange 함수를 1개만 만들 수 있고
2. 컴포넌트를 나눌 때도 props를 적게 내려줄 수 있다

---

✅ React 숙련 강의

📍 https://velog.io/@jetiiin/Styled-Components
📍 https://velog.io/@jetiiin/React-Hooks-1
📍 https://velog.io/@jetiiin/React-Hooks-2

어려웠던 내용

useRef의 저장공간이라는 개념을 잘 모르겠다 (useState와의 차이, 쓰임 등)

느낀점

1. 숙련주차가 시작됐다
   확실히 입문 강의보다 난이도가 훌쩍 뛴 느낌
   알듯 말듯 한 개념들이 머릿속에 둥둥 떠다닌다 🤪
   (아예 모르겠는 것도 있고^^)
2. 내일은 redux 파트까지 다 들어야지 💪